跨域资源共享 (CORS) 在 JavaScript 中的应用352

在 JavaScript 中，跨域问题是指脚本无法从不同源（协议、域名或端口号）的服务器请求资源。为了解决此问题，引入了跨域资源共享 (CORS) 协议。

CORS 是一种基于 HTTP 的机制，允许浏览器在不同源之间发送和接收请求，从而实现资源跨域共享。当浏览器发出跨域请求时，它会发送一个预检请求（OPTIONS 请求）来检查服务器是否允许该请求。如果服务器允许，浏览器将发送实际的请求。

CORS 响应头

在预检请求中，服务器必须返回以下 CORS 响应头：* Access-Control-Allow-Origin：指定允许访问该资源的源列表。可以是 "*"（允许所有源）或特定域。
* Access-Control-Allow-Methods：指定允许用于访问该资源的 HTTP 方法列表。
* Access-Control-Allow-Headers：指定允许在请求中使用的 HTTP 头列表。
* Access-Control-Max-Age：指定预检请求的缓存时间，以秒为单位。

在实际请求中，服务器必须返回以下 CORS 响应头：* Access-Control-Allow-Origin：与预检请求中相同。
* Access-Control-Allow-Credentials：指定是否允许跨域请求携带凭证（例如 Cookie 和 HTTP 认证）。

设置 CORS

服务器管理员需要在服务器端配置 CORS。可以使用以下步骤设置 CORS：
在服务器端添加 CORS 响应头。
如果需要使用凭证，请将 Access-Control-Allow-Credentials 标头设置为 "true"。
根据需要指定允许的源、方法和头。
部署更改。

在 JavaScript 中使用 CORS

在 JavaScript 中使用 CORS 非常简单。只需使用标准的 XMLHttpRequest 对象或 fetch() API，并设置以下属性或头：* XMLHttpRequest：
* withCredentials：如果需要使用凭证，请将其设置为 true。
* setRequestHeader("Origin", "")：设置请求源。
* fetch()：
* mode：设置为 "cors"。
* headers：可以设置任何 CORS 头，例如 "Origin" 和 "Authorization"。

常见 CORS 问题

在实现 CORS 时，可能会遇到以下常见问题：* "没有 'Access-Control-Allow-Origin' 标头" 错误：服务器未配置 CORS。
* "拒绝访问" 或 "跨源资源共享请求未完成" 错误：浏览器不支持 CORS 或服务器配置不当。
* "预检请求失败" 错误：服务器未针对预检请求正确配置 CORS。
* "响应未通过 Access-Control-Check" 错误：响应中缺少 CORS 响应头或头不符合服务器配置。

CORS 是一种强大的机制，它允许 JavaScript 应用程序从不同源请求资源，从而实现跨域资源共享。通过正确设置 CORS，开发人员可以构建功能更强大的跨域 Web 应用程序。

2024-12-18

上一篇：原生 JavaScript: 在网络中构建强大交互的指南

下一篇：JavaScript 原生：从入门到精通