在前端开发中，我们通常会使用 XMLHttpRequest 或 Fetch API 发送 HTTP 请求获取数据。但是，由于浏览器的安全机制限制，跨域请求时可能会出现错误。其中一种解决方法就是设置 CORS（跨域资源共享）。
CORS 允许服务器指定哪些来源可以访问该服务器上的资源。在客户端发出请求时，浏览器会检查响应头中是否包含特定的字段来确定请求是否受到允许。以下介绍几个常用的头部字段：
1. Origin
Origin 字段是一个字符串，代表了发起请求的源（协议 + 域名 + 端口号），例如 https://example.com:8080。当浏览器发送跨域请求时，会自动将当前页面的 origin 添加到请求头中。
2. Access-Control-Allow-Origin
Access-Control-Allow-Origin 是由服务器返回的响应头字段，用于指示允许访问该资源的来源。如果该值为 *，则表示所有来源都可访问该资源；否则，仅允许指定的来源访问。
示例代码：
-- ------- ------ ----- ---- - ---------------- ----------------------- ---- -- - -------------------------------------------- ----------------------- -------------- --------- ----------------
在上面的示例中，我们指定了 https://example.com 可以访问该资源。
3. Access-Control-Allow-Credentials
Access-Control-Allow-Credentials 字段是一个布尔类型的值，默认为 false。如果需要发送跨域请求时携带 Cookie 等认证信息，则需要将该字段设置为 true。
示例代码：
-- ------- ------ ----- ---- - ---------------- ----------------------- ---- -- - -------------------------------------------- ----------------------- ------------------------------------------------- ------ -------------- --------- ----------------
在上面的示例中，我们允许 https://example.com 发送包含 Cookie 的请求。
4. Access-Control-Allow-Headers 和 Access-Control-Request-Headers
Access-Control-Allow-Headers 用于指定客户端可以使用哪些头部字段。如果需要使用自定义头部字段，则需要在服务器端设置该字段。
Access-Control-Request-Headers 则用于在发起预检请求（OPTIONS 请求）时，告诉服务器需要哪些头部字段的访问权限。
示例代码：
-- ------- ------ ----- ---- - ---------------- ----------------------- ---- -- - -------------------------------------------- ----------------------- ------------------------------------------------- ------ --------------------------------------------- --------------------------------- -------------- --------- ----------------
在上面的示例中，我们允许客户端使用 X-Requested-With 和 content-type 两个头部字段。
总结
通过设置 CORS 头部字段，我们可以在前端实现跨域请求。不过需要注意的是，CORS 并不是银弹，仍然需要一些额外的安全措施来保障应用程序的安全性。同时，为了提高用户体验，建议尽量减少跨域请求的次数和数据量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/10022