处理跨域的三种方式

因为浏览器采用了同源策略，即协议、域名地址、端口号必须全部相同所以浏览器不能执行其他网站的脚本。但是有时候又必须要使用来自另一网站的数据，所以出现了跨域请求。那么怎样解决呢？

一、使用jsonp  

jsonp的原理实际上是利用了script标签的src属性能跨域引入（访问）js的特性，动态创建script标签（script标签只会加载一次，所以需要动态创建），并且在本地全局声明一个函数，用来接收文件里面函数调用时传递的数据数据。

值得注意的是jsonp只能使用get请求，不能使用post请求。

以jquery的jsonp为例 请求百度搜索的开放接口

二、代理 

例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

虽然通过服务器转发请求可以达到跨域请求的目的，但是增加服务器的负担，且访问速度慢。

以在vue-cli项目中使用为例

在config目录下的index.js文件中找到proxyTable

这里是以‘/api’代替目标路径http://localhost

使用时/api/+接口

三、CORS 

在访问的路径的后台设置响应头，让前端可以访问。

header('Access-Control-Allow-Origin:*');//允许所有来源访问

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式