vue跨域代理配置与 浏览器跨域配置

浏览器报错信息如下

方法一（适用于开发）

vue.config.js 增加 disableHostCheck: true

disableHostCheck: true

谷歌为例

创建快捷方式->右键属性->在 目标位置后面加上

–disable-web-security –user-data-dir=D:\MyChromeDevUserData

user-data-dir 中 MyChromeDevUserData 是自己创建的文件夹

方法2（推荐)

在vue.config.js中配置代理

pathRewrite —- 在项目中找到/api(前)开头的URL，并替换为/api(后）

module.exports = {
    devServer: {
        port: 8200, // 此处修改你想要的端口号
        proxy: {  //配置跨域
            '/api': {
              target: 'http://xx.xx.xx.xxx:8100/',
              changOrigin: true,  //允许跨域
              pathRewrite: {
                '^/api': '/api' 
              }
            },
          }
    }

}

在配置统一的url js文件中，把baseURL改成地址前缀（关键）

重点：baseURL: “/“

若把baseURL写成改成vue的启动地址，则在window的nginix上没问题。但部署在Linux服务器上会出现找不到axios请求后台地址失败

const request = axios.create({
  // 根据不同的环境设置baseURL，最终发送请求时的URL为: baseURL + 发送请求时写的URL
  baseURL: "/",
  withCredentials: true, // 允许携带cookie
  timeout: 20000 // 请求超时, 20秒
})