跨域详解

跨域的概念

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

同源

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

不同源则跨域

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

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

解决方法

1、JSONP 跨域

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

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

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

2· CORS 跨域(跨域资源共享)

1 通过服务端响应头的方式
2 通过想客户端输出一个响应头
3 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转化为代理地址 骗过浏览器,以此来解决跨域问题。

原文地址:https://www.cnblogs.com/it-Ren/p/10670719.html