vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > devServer.proxy相关配置项使用

vue-cli中devServer.proxy相关配置项的使用

作者:萧仁武

这篇文章主要介绍了vue-cli中devServer.proxy相关配置项的使用详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

devServer.proxy相关配置项的说明

如图:

devServer.proxy中的 changeOrigin 参数

changeOrigin 为false时,请求头中host仍然是浏览器发送过来的host;如果设置成true:发送请求头中host会设置成target的值。

devServer.proxy中的 pathRewrite 参数

本示例中,pathRewrite设置了 '^/lr': '' ,作用如下:

使用代理,首先需要有一个标识,告诉程序这个连接要使用代理,不然的话,可能你的html、css、js、矢量图等静态资源都跑去代理。所以我们要通过一个唯一标识,让接口使用代理,静态资源文件使用本地。

proxy中的 '/lr':{······},就是告诉node,我的接口是要以 /lr 开头的才使用代理。所有的接口都要写成 /lr/xx/xx ,以 /lr 开头,最后代理的接口路径路径就是 http://localhost:8080/lirong/lr/xx/xx

但是例子中真实的后台数据接口里没有 /lr,直接就是 http://localhost:8080/lirong/xx/xx ,所以就需要配置 pathRewrite,用'^/lr': '' 将 /lr 去掉,这样既有正确的标识,又能在真实请求接口的时候去掉 /lr

devServer.proxy代理配置详解

如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。可以通过 *.config.js 中的 devServer.proxy 选项来配置。

.config.js文件中引入依赖项

const proxy = require('http-proxy-middleware');

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串

//服务器会将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000上

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

更多的代理控制行为

const proxy = require('http-proxy-middleware');
module.exports = {   
devServer:{
    host: 'localhost',//target host
    port: 8080,
    //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
    proxy:{
        '/api':{
            target: 'http://192.168.1.30:8085',//代理地址,这里设置的地址会代替axios中设置的baseURL
            changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
            //ws: true, // proxy websockets
            //pathRewrite方法重写url
            pathRewrite: {
                '^/api': '/' 
                //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
           }
    }}
},
//...
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

您可能感兴趣的文章:
阅读全文