|
Http请求跨域（一）什么是跨域请求 跨域问题，是web开发常见的一个问题。自以为工作多年，解决跨域这种“小问题”自是不在话下。但是朋友的一次求助让我发现自己只知其然而不知其所以然。 下面是事情经过，可以直接跳过本段 事情的的经过是：某天A自己设计了一个网站，请B帮忙开发部署。一切都比较顺利，即将完工的时候出现了一个问题。A的网站有两个域名，一个是主站： www.xxx.com ，另一个是二级域名help.xxx.com。现在有一个在help域名下的Js请求了www下的一个接口。接口返回请求跨域，所以来找到我帮忙解决。我信心满满的以为跨域这种小问题，十分八分就搞定了，结果搞了2个多小时才搞定。其中固然有对PHP不熟悉、对前端不熟悉、对Apache服务器配置不熟悉（博主擅长java，服务器熟悉Nginx）当然客观原因是非常多，但这不是借口。 如果当时对跨域有一个系统的认识，就不会搞这么久。 下面进入正题 什么是跨域请求？ 首先说明一点，跨域请求并非是一种错误，而是一种安全策略导致的现象。本质来说，跨域请求和普通HTTP请求并没有不同，而是因为浏览器的一个安全策略导致的一部分特殊请求成为了跨域请求。 在理解跨域请求之前，先要搞懂什么是“域”？ 我的理解：在一个TCP连接中可以获取到的资源都是在一个域下的。不能在一个链接里请求的都是跨域的。当然我这么理解还是有一点不准确但是却方便记忆。 更简单的记忆方法：相同协议、端口、域名就是同一个域 理解了“域”，“跨域”就容易理解了。从一个“域”到另一个“域”就是跨域。从一个“域”到另一个“域”的HTTP请求就是跨域请求。 “域”其实也就是“同源策略”中的“源” 。 Mozila官方，直接用实例解释： 如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。 下表给出了相对http://store.company.com/dir/page.html同源检测的示例: | | | 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://news.company.com/dir/other.html | | |
注意：IE浏览器可谓浏览器中的奇葩。它有自己的一套同源策略，但是他的策略比Mozila的策略要松一些。例如相同域名，不同接口是不跨域的。 浏览器同源策略是基于安全考虑而出现的一种授信策略。而且是只在浏览器中遵守，当然如果我们自己开发一个浏览器，不遵守同源策略也是可以的。 那么又出现一个问题，为什么会出现同源策略呢？ Mozila官方解释：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。 浏览器中除了HTTP请求需要遵守“同源策略”以外，还有那些需要遵守同源策略呢？ 1、Cookie、LocalStorage、IndexDB 2、获取DOM对象（一个“域”下的脚本无法获取另一个域下的DOM对象） 3、Ajax请求（也就是跨域的HTTP请求） 现在了解了，是由于浏览器的同源策略导致了“域”的出现。导致两个“域”下的资源（js脚本和DOM对象）交互收到限制。
| 
发表于 2023-5-4 21:10:24
收藏
