新版vue/cli创建项目中解决axios跨域CORS问题

本地开发环境中使用axios调用远程服务器api接口出现下面的错误:

Access to XMLHttpRequest at ‘api.xxx.xxx/xx’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

典型的CORS跨域问题,刚开始捯饬vue和axios,当然用的都是最新版本了,结果网上一搜解决方案,一坨一坨的海喷胡呲,GayHub上axios的issue区里面的回复也是各种👎,好不容易找到个设置本地proxyTable的方法,结果应该还都是针对的老版本vue-cli脚手架创建的项目,原文里面提到了

在webpack配置一下config/index.js里面的proxyTable就OK了

可是我是用最新的vue/cli脚手架创建的项目,就木有config/这个文件夹…思路是有了,还是看一下webpack官方的文档吧,于是找到了这个 再结合vue官方文档,新版本的vue中使用的是和package.json同级别路径中的vue.config.js作为webpack的配置文件,当然这个vue.config.js默认是没有的,手动创建一个就行,然后配置内容写成这样:

module.exports = {
    devServer: {
        proxy: 'https://api.xxx.com/v1'
    }
}

补充一下: 要访问的远端服务器API地址是这样的(带参数的GET请求):

https://api.xxx.com/v1/getServiceInfo?veid=xxx&api_key=xxx

创建好上面的vue.config.js配置文件后调整一下之前写的axios请求

// axios已经在main.js中注册给了全局变量$http
// import axios from 'axios'
// Vue.prototype.$http = axios

this.$http({
      url: "/getServiceInfo",
      method: "get",
      crossdomain: true,
      params: {
        veid: 123321,
        api_key: "xxxxxxxxxxxx"
      }
    }).then(res => {
      console.log(res.data);
    });

这里需要注意设置过proxy之后再使用axios发送请求的url就不能写完整的地址了,直接写/和后面的名称就行,走代理之后会拼接成完整的原始地址.

避坑警告 上面配置好vue.config.js之后必须重新启动一遍devserver,否则yarn serve命令运行的开发服务器的热更新是不会使用这个新建的配置文件的.

至此,再用axios请求远端服务器的api接口,嘛毛病都没有了!(此处应有掌声和鲜花❤️)