vue-cli 项目中基于 proxyTable 解决 axios 跨域问题

日期： 2019 年 12 月 10 日

vue-cli 项目中基于 proxyTable 解决 axios 跨域问题

问题描述

最近在用 vue-cli 2.0 搭建的 Vue 项目中调用百度地图 api 时遇到了跨域的问题，如下：

axios.png

cros.png

什么是跨域

广义的跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，包括资源跳转，资源嵌入，脚本请求等，我们常说的跨域实际上是侠义上的跨域，是由浏览器同源策略限制的一类请求场景

浏览器的同源策略是浏览器最基本也是最核心的安全功能，它对不同源的客户端之间的资源读写做了限制，也就是协议，域名，端口号只要有一个不同（即不同源），他们之间就不能进行资源的访问，也就是会出现跨域问题

这里，我们本地的服务是跑在 http://localhost:8080/ 上的，而要调用的接口是在 http://api.map.baidu.com/ 上，所以浏览器就限制了我们对这个接口进行访问

跨域的解决方案有很多，这里我们选择通过配置 proxyTable 代理来解决跨域的问题，其原理是通过利用node.js创建一个本地服务器进行代理，我们通过重写 axios 使客户端每次发起请求的时候在接口头部都带上指定的 URL，再在 proxyTable 中进行代理配置，每当请求的接口是以指定 URL 开头的时候，都代理访问到我们需要访问的那个域上

利用 proxyTable 代理解决跨域

第一步 —— 修改 main.js

main.png

第二步 —— 修改 config 中的 index.js

index.png

第三步 —— 修改接口调用方式

new-axios.png

处理结果

result.png

result1.png

需要注意的是，以上方法只适用于解决开发环境下的跨域问题，也就是 npm run dev 跑是没问题的，但是打包部署之后还是跨域的