本文共 1186 字，大约阅读时间需要 3 分钟。

为什么会出现跨源请求？

1. 同源策略的背景

在浏览器中，内容是很开放的，任何资源都可以接入其中，如 JavaScript 文件、图片、音频、视频等资源，甚至可以下载其他站点的可执行文件。然而，浏览器并不是完全自由的。如果不加以控制，就会出现一些不可控的局面，例如会出现一些安全问题，如跨站脚本攻击（XSS）、SQL 注入攻击、OS 命令注入攻击、HTTP 首部注入攻击、跨站点请求伪造（CSRF）等。

为了保障用户的隐私和数据安全，浏览器引入了同源策略。同源策略是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。

2. 同源策略的定义

同源策略的一个核心概念是：如果两个 URL 的协议、主机和端口都相同，我们就称这两个 URL 同源。协议是定义了数据如何在计算机内和之间进行交换的规则的系统，例如 HTTP、HTTPS。主机是已连接到一个计算机网络的一台电子计算机或其他设备。端口是主机之间的通信进程之间的通信通道。

3. 同源策略的作用

同源策略主要表现在以下三个方面：

• DOM 访问限制：脚本无法直接访问跨源页面的 DOM 元素、属性或方法。
• Web 数据限制：跨源请求只能发送到与当前网页具有相同源的目标服务器。
• 网络通信限制：浏览器阻止从一个源发出的请求获取来自其他源的响应。

4. 跨源资源共享（CORS）

由于同源策略的限制，跨域请求难以实现。跨源资源共享（CORS）是一种机制，允许在受控的条件下，不同源的网页能够请求和共享资源。CORS 的基本思想是，服务器在响应中提供一个标头（HTTP 头），指示哪些源被允许访问资源。

5. CORS 的实现机制

• 预检请求：非简单请求的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为预检请求。预检请求的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。
• 简单请求与预检请求：简单请求不会触发 CORS 预检请求。简单请求的条件包括：只能使用 GET、HEAD、POST 方法之一，自定义标头有限制，不使用自定义请求标头等。
• 附带身份凭证的请求：服务器在设置 CORS 标头时，需要注意一些安全问题，例如不能将 Access-Control-Allow-Origin 设为通配符 ，也不能将 Access-Control-Allow-Methods 设为通配符 等。

6. webpack dev server 的跨域支持

在本地通过 webpack dev server 进行开发时，不需要服务器端配置 CORS 是因为 webpack dev server 会捕获请求并转发给目标服务器，目标服务器返回的数据再由 webpack dev server 转发回浏览器。这样就绕过了浏览器的同源策略限制，使你能够在本地开发环境中访问线上接口。

转载地址：http://aaxfk.baihongyu.com/