web前端跨域处理

什么是跨域

由于浏览器同源策略限制的一类请求场景,当在不同域名、端口、协议就会构成跨域。

什么是同源策略

所谓的同源是指“协议、域名、端口”三者都相同;
它是浏览器最核心的也最基本的安全功能,如果没有同源策略,很容易遭受xss、csfr攻击。

如何解决跨域

目前常用的有以下4中:

1. 通过jsonp

最早的解决方案,利用script标签可以跨域的原理实现
限制:
          1)需要服务器的支持
          2)只能发起get请求

2. cors(跨域资源共享)

规范化的跨域请求解决方案,安全可靠
优势:
          1)在服务端进行控制是否允许跨域,可自定义规则
          2)支持各种请求方式
缺点:
          1)会产生额外的请求

首先介绍一下什么是“cors”
cors是W3C标准,全名是“跨域资源共享”,它允许浏览器向跨源服务器,发出XMLHttpRequest请求, 从而克服AJXA只能同源使用的限制。cors需要浏览器和服务器同时支持;目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

	浏览器端:
		目前,所有浏览器都支持该功能(IE10以下不行)。
		整个CORS通信过程,都是浏览器自动完成,不需要用户参与。
	服务端:
		CORS通信与AJAX没有任何差别,因此你不需要改变以前的业务逻辑。
		只不过,浏览器会在请求中携带一些头信息,我们需要以此判断是否运行其跨域,
		然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

3. nginx代理跨域

思路:利用nginx反向代理把跨域为不跨域,支持各种请求方式
缺点:需要在nginx进行额外的配置,语义不清晰

4. nodejs中间件代理跨域

利用 node.js 的中间件去处理跨域,类似于将跨域请求交给第三方,第三方去访问指定的网络,获取数据然后返回

猜你喜欢

转载自blog.csdn.net/weixin_44897255/article/details/108218030