一文带你了解跨域原理与解决办法

一文带你了解跨域原理与解决办法

​  跨域,指的是从一个域名去请求另外一个域名的资源,即跨域名请求。跨域时,浏览器不能执行其他域名网站的脚本,这是由浏览器的同源策略造成的,是浏览器施加的安全限制, 跨域限制访问,其实是浏览器的限制同源策略是浏览器最核心也最基本的安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源 ,这是一个用于隔离潜在恶意文件的重要安全机制。所以跨域问题只在浏览器中出现,如果客户端是APP的话,那跨域问题就不存在了。 PS:IE端口除外,IE对同源策略的定义有略微的不同,具体可以查看文末给出的同源策略的链接。

  所谓同源是指:域名,协议,端口相同,即两个资源具有相同的。 只要三者之间有一个不同,就是跨域(跨源)。

URL 说明 同源检测结果 是否跨域
http://www.abc.com/a.html
http://www.abc.com/b.html
域名 端口 协议相同 成功
http://www.abc.com/dir1/a.html
http://www.abc.com/dir2/b.html
域名 端口 协议相同,路径不同 成功
http://www.abc.com:8080/a.html
http://www.abc.com/b.html
域名 协议相同,端口不同 失败
http://www.abc.com/a.html
https://www.abc.com:80/b.html
域名 端口相同,协议不同 失败
http://www.abc.com/a.html
http://59.68.92.100/b.html
域名域名对应的IP 失败
http://www.abc.com/a.html
http://blog.abc.com/b.html
二级域名相同,三级域名不同 失败
http://www.abc.com/a.html
http://abc.com/b.html
二级域名相同,三级域名不同 失败
http://www.abc.com/a.html
http://www.aaa.com/b.html
协议 端口相同,域名不同 失败

1 非同源限制

  1. 无法读取非同源网页的 CookieLocalStorageIndexedDB
  2. 无法对非同源网页的 DOMJS对象进行操作
  3. 无法向非同源地址发送 AJAX请求
注:本文只专注于AJAX请求跨域,其他跨域类型不做过多深入。

2 实现跨域的解决方案

​  实现跨域的方式有很多种,比如JSONP、CORS、http-proxy、nginx、websocket、跨站脚本API访问,如:postMessage、document.domain等。

2.1 JSONP

​  由于同源策略的限制,AJAX请求是不允许进行跨域请求的,但是在HTML中,拥有srchref属性的标签是可以跨域请求外部资源的,如link、script、img等(值得注意的是,不同标签允许的交互类型貌似是不同的,分别为跨域写、跨域资源嵌入、跨域读,暂时不知道这些标签可以发送跨域请求的原因,貌似是历史遗留问题,有知道的大佬可以指点一下),根据

你可能感兴趣的:(HTTP,跨域,同源策略,CORS,HTTP,前端)