如何使用Axios和代理获取API数据，解决Vue项目中的404与跨域CORS问题

1 404错误根因 #

你观察到请求被发到http://localhost:8080/pubapi/v2/latest而非目标域名，优先排查两个配置点：

• 检查axios全局配置是否设置了baseURL: 'http://localhost:8080'，同时你写请求url时漏写了https://协议头，被识别为相对路径拼接在了baseURL后
• 检查是否配置了axios请求拦截器，在请求发出前强制修改了请求url的域名部分

确认请求url完整拼写为https://www.coinspot.com.au/pubapi/v2/latest后，你会遇到CORS跨域报错，这是因为浏览器同源策略限制，前端直接请求第三方域名接口会被拦截，而Postman没有同源策略限制所以可以正常获取数据。

2 本地开发阶段解决方案 #

使用Vue框架内置的代理转发功能绕开跨域限制：

1. 在项目根目录新建/修改vue.config.js文件，添加如下配置：

module.exports = {
  devServer: {
    proxy: {
      '/pubapi': {
        target: 'https://www.coinspot.com.au',
        changeOrigin: true,
        secure: false
      }
    }
  }
}

2. 保存配置后重启本地开发服务，修改请求代码为相对路径：

axios.get('/pubapi/v2/latest')
.then((response) => {
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
 });

3 生产环境部署解决方案 #

本地开发代理仅在开发阶段生效，上线后可选择两种方案：

• 由服务端开发同学在你方业务后端做接口转发，前端请求你方自有域名的接口，后端服务请求coinspot接口后将数据返回给前端，绕开浏览器跨域限制
• 若目标接口支持JSONP格式，可改用JSONP方式发起请求

内容的提问来源于stack exchange，提问作者deeej