vue开发环境跨域配置(全网唯一正确解释)

2021年3月14日 06:04 by wst

web开发

---

记录在vue开发中跨域问题的解决方法

域名重定向

配置选项（vue.config.js）的写法：

module.exports = {
    baseUrl: './',
    assetsDir: 'static',
    productionSourceMap: false,
    devServer: {
        proxy: {
            '/api':{
                target:'https://api.xxxxx.com',
                // target:'',
                changeOrigin:true,
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}

baseUrl配置：

// create an axios instance
const service = axios.create({
  baseURL: "/api", // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

经过实践，得出结论，部分代码解释如下：

某个业务请求路径 '/boss/mg/user/count' 会经过如下转换：

1.  拼接：上文的路径首先拼接为 /api/boss/mg/user/count

2. 重定向：

      （1）/api 被替换成 https://api.xxxxx.com，即：https://api.xxxxx.com/boss/mg/user/count  (这是错误解释)

经过查阅官方文档，正确解释为：

（1）/api 下的配置项 target指的是被定向到的服务器地址，即：

/api/boss/mg/user/count => https://api.xxxxx.com/api/boss/mg/user/count

（2）然后是路径的重定向，'^/api':'' ，即 ^/api 被替换成空字符：

https://api.xxxxx.com/api/boss/mg/user/count => https://api.xxxxx.com/boss/mg/user/count 

事实上服务端暴露出来的接口地址正是https://api.xxxxx.com/boss/mg/user/count

 

参考：https://github.com/chimurai/http-proxy-middleware#proxycontext-config

---