跨域详解

跨域的概念

从一个站点访问一个资源，然后在这个资源当中又去访问另外的一个站点的资源，这个就是跨域。

同源

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

不同源则跨域

例如http://www.baidu.com/

 

AJAX的XMLHttpRequest对象 发送跨域请求，

 

 

解决方法

1、JSONP 跨域

其本质是利用了<script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

jQuery 的$.ajax() 方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。

 ***jsonp 的跨域，它只支持get 方式的请求，因为它是使用script 标签去发送请求，而且服务端需要做处理，客户端也需要做处理。如果跨域的时候传递的数据非常多，jsonp 的方式就不太可取。

2· CORS 跨域（跨域资源共享）

 

通过服务端响应头的方式
通过想客户端输出一个响应头
header("Access-Control-Allow-Origin:*");

 

 

这种方式是服务器直接可一个给定一个响应头Access-Control-Allow-Origin，告诉客户端浏览器，这些数据可以获取。这个Access-Control-Allow-Origin也是属于http 协议规定的.

jsonp 与 cors 的区别

jsonp 是最早期的这种跨域解决方案，因为是使用script 标签发送请求，所以兼容性会比较好，只支持get 方式.

cors （目前用的多）是后期的一种解决方案. 它只需要改服务器的配置，客户端不需要做任何的处理。兼容性稍微差一些，因为Access-Control-Allow-Origin 是后期http 协议规定的，POST/GET都支持。

其它方式: 通过后台服务器转发，通过设置代理服务器。

 

通过webpack自带代理（proxy）解决跨域

在package.json最后面　　添加一段

"proxy": "http://168.110.5.55:10001" //后端地址

即可启用webpack的自带代理

 

 将localhost转化为代理地址 骗过浏览器，以此来解决跨域问题。