No 'Access-Control-Allow-Ori

前言

最近的两次开发在试用axios时被这个问题所困扰，网上也有很多层出不穷的回复，包括知乎上也有，所以我就来做个小结。

1.Jsonp

可以引入vue-resource，然后使用

或者是原生JS设置type为jsonp

2.插件：http-proxy-middleware

https://github.com/chimurai/http-proxy-middleware

2.1 vue-cli的配置(用到的也是http-proxy-middleware)

如果是vue-cli搭建的项目，在config下有个index.js文件，然后有一个proxyTable的参数，可以进行以下两种配置方式，原来的服务器是localhost:4567,需要配置的是localhost:8089

vue-cli-001

3.Nginx

配置代理服务器。

或者修改header

nginx跨域解决方案配置

4.服务器端配置

可以在API上配置以下配置，意思是所有的url都可以访问，缺点是安全性不高。

responce.header("Access-Control-Allow-Origin","*");

5.[CORS](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS)

小结

总的来说解决跨域问题最优的解决方案是通过配置代理服务器，将url转成想要的服务器的URL。