vue2.x(vue-cli2.x)配置跨域请求代理，设置请求头

注意：如果是vue-cli3.x版本以上的配置请看
https://blog.csdn.net/m0_38134431/article/details/104802038

1、在config/index.js设置配置文件，跨域配置代理

（默认里面内容为空，我们需要加入对跨域接口的配置）
根据接口的不同设置的请求头和主机也不同，自己按照格式要求进行配置即可。

如上图配置好了之后，'/getapis/getCurrentCity'为自定义的axios请求路径，自己根据相应接口功能来命名。后面在用axios请求接口的时候，url路径就要写自定义的这个，那么代理就会自动解析成对应的请求接口了。

注意：修改了配置文件之后要重新启动项目！

2、配置了代理之后，我们就可以使用axios来进行跨域请求受保护的接口了

一般会在额外的js文件中，进行接口请求的参数拼接和请求传回的数据的格式进行处理。这时候这个js文件就需要额外引入axios（注意vue组件js代码块中用的，和js文件用的不一样。我们在这里直接import引入即可使用）：

getCurrentCity.js文件代码如下图代码所示：
参数的拼接：

axios请求接口返回数据的处理（如果需要处理的话才处理）：

3、在vue组件中就能调用函数取到到接口数据了

import {getCurrentCity} from 'common/apis/getCurrentCity.js'

export default {
	methods:{
	  _getCurrentCity () {
	  	  // 在这里就可以获取到当前城市的接口数据了
	      getCityCurrent().then((res) => {
	        // 打印出获取到的数据
	        console.log(res)
	      }).catch((err) => {
	        console.log(err)
	      })
    	}
	},
	mounted () {
    	this._getCurrentCity()
  }
}

常见问题：

1、按照上面步骤配置好后请求接口报错404
首先需要排查自己的参数是否和原接口一样；

然后把自己的请求地址前面代理部分替换成target中地址，输入到浏览器地址栏看看是否能成功访问不报错404；
如果能够正常访问不报404错误的话，那就是地址没问题；

最后排查自己的proxyTable配置中是不是有多个跨域接口配置，pathRewrite是否有冲突了，导致地址解析错误而报错404，如果是的话修改为不一样的。

2、运行后还是报错Access-Control-Allow-Origin错误
查看自己的bypass请求头是否按照别人的地址写对了。

---

2020/03/19 注释： 现在vue-cli版本已经发布到了4.x版本，配置代理的方式也改变了，详细请看官网：
https://cli.vuejs.org/zh/config/#devserver-proxy

常用的vue.config.js配置请看：
https://blog.csdn.net/m0_38134431/article/details/104802038