搜 索

总结丨解决跨域问题

  • 256阅读
  • 2021年09月10日
  • 0评论
首页 / 默认分类 / 正文

前言

做过 web 开发的,应该都遇到过跨域问题。

跨域

所谓的跨域问题,简单来说就是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的。
同源策略(Same origin policy),它是由 Netscape 公司提出的一个著名的安全策略,1995 年引入浏览器。它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响——它能帮助阻隔恶意文档,减少可能被攻击的媒介。

同源策略

如果两个 URL 的协议端口(如果有指定的话)和域名都相同的话,则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”,或者直接是 “元组”。
绝对 URI 的格式

也就是说,当一个页面请求 URL 的协议、域名、端口三者之间的任何一者与当前页面 URL 不同,即为跨域。
下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:

请求URL结果原因
http://store.company.com/dir2/other.html同源只是路径不同
http://store.company.com/dir/inner/another.html同源只是路径不同
https://store.company.com/secure.html失败协议不同
http://store.company.com:81/dir/etc.html失败端口不同 (http:// 默认端口是80)
http://news.company.com/dir/other.html失败主机不同

即便两个不同的域名指向同一个 ip 地址,也非同源。所以,localhost127.0.0.1 虽然都指向本机,但也属于跨域。

跨域导致的问题

  • 不能读取非同源网页中的 Cookie、LocalStorage 和 IndexDB 等数据;
  • 不能接触非同源网页的 DOM 结构 和 JS 对象;
  • 不能向非同源地址发送 AJAX 请求。

浏览器会报错:

XXX has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方案

HTML 有一些特殊标签例如:\<img\>、