什么是跨域?

发布于 14 天前  35 次阅读 本文共876个字


想要了解跨域。首先需要了解浏览器的同源策略 / SOP (Same origin policy):

区分同源和非同源:

用当前页面的地址 && 数据请求的接口地址

  1. 协议
  2. 域名或IP
  3. 端口号

以上三部分完全相同属于同源策略,我们使用AJAX技术获取数据,只要有一个不一样的,就属于非同源。

同源策略的限制内容有:

  • Cookie、LocalStorage、IndexedDB等存储性内容
  • DOM节点
  • AJAX请求发送后,结果被浏览器拦截了

除了这三种标签允许跨域加载资源:

  • <img src="..."></img>
  • <link href="..."></link>
  • <script src="..."></link>

跨域,指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。

所谓同源,就是指域名、协议、端口均相同,举个栗子:

http://www.123.com/index.html 调用 http://www.123.com/server.PHP (非跨域)

http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)

http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)

http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)

请注意:localhost 和 127.0.0.1 虽然都指向本机,但是也属于跨域!

浏览器执行JavaScript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

那,如何解决跨域呢? 请看这里


努力,只为遇见更好的自己!