Vue项目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
           }
    }}
},
}

跨域的proxyTable中pathRewrite 详解

proxyTable: {
      '/api':{
        target:'http://localhost:8083',
        // secure:true,
        changeOrigin:true,
        pathRewrite:{
          "^/api":""
        }
      }
    }

1.要理解pathRewrite，首先要明白proxyTable下‘/api’的作用。

使用代理, 首先需要有一个标识, 标明哪些连接需要使用代理，只有有标识的连接才用代理。”/api”就是告知，接口以”/api”开头的才用代理，所以写请求接口时要使用“/api/xx/xx”的形式，使用代理后生成的请求路径就是’http://localhost:8083/api/xx/xx’.

2.pathRewrite中 “^/api”:""的作用

当实际需要请求的路径里面没有”/api“时. 就需要 pathRewrite,用’’^/api’’:’’, 把’/api’去掉, 这样既能有正确标识, 又能在请求到正确的路径。