跨域问题

跨域问题可以从前端本地调用线上api时webpack配置proxy代理或后端使用cors跨域资源共享配置或nginx等代理服务器配置转发从而得到解决

这里着重记录下前端如何通过webpack配置proxy代理

//在webpack配置文件中添加devServer配置
devServer: {
	proxy: {
      		"/api": {
        		target: '域名例如https://xxx.com/',
        		changeOrigin: true,
        		secure: false,
        		pathRewrite: {
          			"^/api": ""
        		}
      		}
    	}
}

proxy中定义的/api是匹配所有请求中带有/api前缀的请求进行转发配置，例如localhost:3000/#/api/getList接口包含前缀/api，所以会走到上面的转发配置中，配置的target属性就是你需要转接到的api地址，例如本地想要请求的域名是https://xxx.com，所有的接口都是这个域名下的，那么target就设置成该域名，pathRewrite中配置的"^/api": ""，意思就是因为我们需要通过/api前缀去匹配那些需要转发的请求，但是如果添加了/api前缀，但真是的接口地址中并没有包含/api，那么请求转发后会找不到接口地址，因为多了个/api前缀，需要做的就是把/api前缀去掉

举个例子

我需要访问的接口地址是https://xxx.api.com下面的地址，按照上面进行配置之后

例如当前有个接口是https://xxx.api.com/getList

https://xxx.api.com/getList本身并不包含/api，但是请求的时候我加上/api前缀，为了就是能把当前请求匹配到并进行转发配置，所以我的请求是例如axios({url: /api/getList});其实我应该要访问的是axios({url: /getList});但是我加了/api前缀之后系统就会匹配到当前请求需要进行转发，转发的时候又把/api前缀去掉了，所以转发玩之后我请求的地址就是https://xxx.api.com/getList，没有问题。

这个过程就是把本地的请求localhost:3000/#/api/getList转发到https://xxx.api.com/getList