vuecli3[跨域代理配置]-Access to XMLHttpRequest at 'xxx' by CORS跨域问题前端解决方式

目标：将本地请求http://localhost:9091/api/app/userinfo转发到
http://10.101.80.131:3001/app/userinfo地址
在vuecli3的目录结构中，代理配置是在vue.config.js文件中进行配置

 devServer: {
    host: "0.0.0.0", //指定使用一个 host。默认是 localhost，这里默认值即可
    port: 9091, //指定端口
    hot: true, // 开启热更新
    https: false, // 是否开启https模式
    proxy: { // 请求代理服务器
      '/api': { //带上api前缀的
        target: 'http://10.101.80.131:3001', //代理目标地址
        changeOrigin: true,
        secure: false,
        pathRewrite: { // 在发出请求后将/api替换为''空值，这样不影响接口请求
          '^/api': ''
        }
      }
    }
  },

axios实例 baseURL 属性设置 ‘/api’ 即可让所有的请求地址带上/api/…的路径，此时即可代理
或者这样：

vue-cli3代理配置注意：
**1、**不能设置本地路径读取操作如：
我的接口前缀都是从.env.development中读取的



这样的操作可以将所有的接口前缀路径都提取到一个文件夹统一管理，但是在代理中却不能出现，不然会报错。
解决方式只需注释掉配置路径即可：

**2、**接口请求结构

代理配置成功之后，接口的路径同样是没有改变的，如：请求前缀为本地地址加上/api路径，但是请求确实是成功的，所以不要认为路径没变成 http://10.101.80.131:3001/app/userinfo 就是错的，代理请求路径不会变成理想中的状态。

来源：CSDN

作者：墨水白云

链接：https://blog.csdn.net/lxy869718069/article/details/103822777