http -- 跨域问题详解（浏览器）

参考链接

参考链接

1.  跨域报错示例

Access to XMLHttpRequest at 'http://127.0.0.1:3000/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

前端的这个报错相信很多人都有遇到过，也知道这是跨域请求的问题。那到底什么叫跨域呢？

跨域问题简单描述：

       简单一点说，你网页是 xxx.com/xxx.html，这个网页中的元素不允许访问除这个域名以外的其他域名下的资源(也许不严谨，化繁为简能快速理解其本质)。

       再具体一点就是这个页面下的 Ajax 请求，不能去调类似 http://abc.com/xxxx 这样的接口，必须是 xxx.com 下的接口。

2. 了解 什么是域

域 ：

        域既是 Windows 网络操作系统的逻辑组织单元，也是 Internet 的逻辑组织单元，它是安全边界。 只有域的所有者才能访问管理域内部的资源，若其他的域要访问或者管理，则需要该域赋予其他域相关权限。

        从小角度来讲，在php中的变量作用域，就可以体现出安全边界的概念。在以下例子中，调用test函数并不会输出任何内容。

        因为函数内调用的是局部作用域的变量，而在局部作用域内并没有声明 $a 变量。除非我们使用 global $a; 从全局作用域引用该变量。

        在 PHP 脚本中的变量作用域不算复杂，而将一个网站看做一个域，当它要引用其他域的资源时，就需要目标域对原始域进行授权信任。

        这种从其他域获取资源的操作就叫做 跨域。

简单理解：

        简单一点，就是域名，http://www.abc.com 下的网页只能调 http://www.abc.com/开头的接口否则就是跨域了，跨域就会报错，上面 2.1 小节那个错误提示。

3. 了解 浏览器的同源策略

同源策略是 Web 的一种安全约定，浏览器的同源策略只是对其的一种实现。

浏览器同源策略将认为任何站点装载的内容都是不安全的。所以会对跨域的操作或者请求进行限制，从而让用户安全的上网。

同源 指的是 域名、协议、端口 相同。 若有其中一个不同，浏览器将会认为非同源，也就是跨域。

浏览器的同源策略主要有两种

• DOM 同源策略 ： 禁止对不同源页面的 Dom 元素进行操作，主要是在 iframe 标签加载跨域页面出现。
• XMLHttpRequest 同源策略 ： 禁止使用 XHR 对象对不同源地址发起请求。

存储在浏览器中的数据，如 localStroage、Cooke 和 IndexedDB 不能通过脚本跨域访问

3.1 DOM 同源策略

        如果没有 DOM 同源策略，也就是说不同域的 iframe 之间可以相互访问操作。

        那么将会出现这种攻击操作：我们 iframe 包含某个网站的登录页，并且监听目标网站的登录按钮，当用户触发按钮的时候，我们拿到目标网站 input 的dom元素，并且取值，保存到自己的服务器上。

        但是因为有 Dom 同源策略的存在，禁止操作不同源页面的 dom 元素，甚至我们还可以将自己的网站设置 禁止在非同源网站上 iframe ，我们来看看下面的例子