vue项目前端本地调试跨域问题-配置代理

    项目遇到一个问题，本地调试运行后浏览器打开显示跨域了。此前询问别的同事告诉我，项目组一直使用的统一解决方案是使用谷歌浏览器调试，因为谷歌浏览器有个关闭浏览器跨域检测的功能。具体使用 mac 时候是在终端输入open -a 'Google Chrome' --args --disable-web-security --user-data-dir=/xxx这个命令，会自动开启一个不检测跨域的浏览器窗口。

   近期我遇到了需要使用别的浏览器调试的实际情况，基于这种情况，决定彻底解决这个问题，于是想到使用 vue 的 proxy 正向代理

    1、项目原本的情况，使用 ajax 请求时，直接使用了后端接口实际地址作为请求网址，这时就产生了跨域问题。所以，在 axios 里把 baseURL 修改为相对地址，例如实际的后端接口为xxx.xxx.cn/api/... 时，修改为

const service = axios.create({

// axios中请求配置有baseURL选项，表示请求URL公共部分

baseURL: '/api',

// 超时

timeout: 20000

})

    2、后在vue.config.js 中devServer 中配置代理。在浏览器中打开请求时，本地调试的情况请求地址为 localhost:xxxx/api/...，代理会帮助我们将该请求转发给 target 后写入的地址请求，跨域问题就处理成功了

devServer: {

    port: port,

    open: true,

    proxy: {

      '/api': {

        target: process.env.VUE_APP_BASE_API,//此处填入配置文件对应的实际 api 请求地址xxx.xxx.cn/api

        changeOrigin: true,

        pathRewrite: {

          ['^' + '/api']: ''

      }

    }

},

disableHostCheck: true

},