在前端开发中，经常需要通过 XMLHttpRequest 对其他域名下的资源进行请求。然而，由于浏览器的同源策略限制，这种跨域请求往往会被阻止。本文将介绍如何解决这个问题，并提供示例代码。
同源策略
同源策略是浏览器的一种安全策略，它限制了来自不同源的脚本在同一个文档中运行。同源指的是协议、域名、端口号均相同。比如，http://example.com 和 http://www.example.com 就不是同源。
同源策略的目的是防止恶意脚本窃取用户的敏感信息。如果没有同源策略，那么一个恶意脚本就可以通过跨域请求获取其他网站的用户信息。
跨域请求的问题
由于同源策略的限制，XMLHttpRequest 无法直接发送跨域请求。如果尝试发送跨域请求，浏览器会报错，如下所示：
Access to XMLHttpRequest at 'http://example.com/api' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这个错误提示告诉我们，浏览器阻止了来自 http://localhost:3000 这个源的请求访问 http://example.com/api 这个资源。原因是 http://example.com 没有设置正确的 CORS 头部。
解决方案
要解决这个问题，我们需要让 http://example.com 设置正确的 CORS 头部，允许 http://localhost:3000 的请求访问。通常情况下，需要设置以下几个头部：
- Access-Control-Allow-Origin：指定允许的源，可以是 *、单个源或多个源的列表。
- Access-Control-Allow-Methods：指定允许的 HTTP 方法，比如 GET、POST、PUT 等。
- Access-Control-Allow-Headers：指定允许的自定义头部。
- Access-Control-Allow-Credentials：指定是否允许发送 Cookie。
示例代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------- ---- ----- -- - -------------------------------------------- ------------------------- --------------------------------------------- ----- ----- ---- --------- --------------------------------------------- ---------------- ------------------------------------------------- -------- ------- --- --------------- ----- ---- -- - ---------- -------- ------- ------- --- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
这个示例代码使用了 Express 框架来创建一个 HTTP 服务器。在中间件中设置了 CORS 头部，允许 http://localhost:3000 发送跨域请求访问 /api 接口。在 /api 接口中返回了一个简单的 JSON 响应。
客户端代码如下：
-- -------------------- ---- -------
----- --- - --- -----------------
------------------- - -----
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
-
--
--------------- ------------------------- ------
-----------这个客户端代码使用了 XMLHttpRequest 对 http://example.com/api 发送了一个 GET 请求。为了让浏览器发送 Cookie，需要设置 xhr.withCredentials 属性为 true。
总结
跨域请求是前端开发中常见的问题，解决它需要了解同源策略和 CORS 头部的相关知识。在实际开发中，我们可以使用 Express 框架来方便地设置 CORS 头部。同时，我们也可以使用第三方库来简化跨域请求的代码编写。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e17d4d1886fbafa4e797b2