编辑“︁JavaScript CORS”︁

{{DISPLAYTITLE:JavaScript CORS}}

'''CORS'''（跨源资源共享，Cross-Origin Resource Sharing）是一种基于HTTP头的机制，允许服务器指示浏览器放宽同源策略（Same-Origin Policy），从而允许不同源的网页访问其资源。在JavaScript中，CORS是实现跨域请求的关键技术。

== 介绍 ==
同源策略（Same-Origin Policy）是浏览器的一项安全机制，它限制来自不同源的文档或脚本如何交互。然而，现代Web应用通常需要从不同的源（如API服务器、CDN等）加载资源，因此需要CORS机制来安全地实现跨域请求。

CORS的工作原理是通过HTTP头部（如<code>Access-Control-Allow-Origin</code>）来声明哪些源可以访问资源。如果服务器未正确配置CORS头部，浏览器会阻止跨域请求。

== CORS 请求类型 ==
CORS请求分为两类：

=== 简单请求（Simple Request） ===
简单请求满足以下条件：
* 使用<code>GET</code>、<code>HEAD</code>或<code>POST</code>方法。
* 仅包含允许的头部（如<code>Accept</code>、<code>Accept-Language</code>、<code>Content-Language</code>、<code>Content-Type</code>等）。
* <code>Content-Type</code>为<code>application/x-www-form-urlencoded</code>、<code>multipart/form-data</code>或<code>text/plain</code>。

示例：
<syntaxhighlight lang="javascript">
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'text/plain'
  }
})
.then(response => response.json())
.then(data => console.log(data));
</syntaxhighlight>

=== 预检请求（Preflight Request） ===
对于不满足简单请求条件的请求（如使用<code>PUT</code>方法或自定义头部），浏览器会先发送一个<code>OPTIONS</code>请求（预检请求）以确认服务器是否允许实际请求。

示例：
<syntaxhighlight lang="javascript">
fetch('https://api.example.com/data', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data));
</syntaxhighlight>

== CORS 头部 ==
以下是关键的CORS相关HTTP头部：

{| class="wikitable"
|-
! 头部名称 !! 描述
|-
| <code>Access-Control-Allow-Origin</code> || 指定允许访问资源的源（如<code>*</code>或<code>https://example.com</code>）。
|-
| <code>Access-Control-Allow-Methods</code> || 指定允许的HTTP方法（如<code>GET, POST, PUT</code>）。
|-
| <code>Access-Control-Allow-Headers</code> || 指定允许的请求头部（如<code>Content-Type, Authorization</code>）。
|-
| <code>Access-Control-Allow-Credentials</code> || 指示是否允许发送凭据（如Cookies）。
|}

== 实际案例 ==
假设你正在开发一个前端应用，需要从<code>https://api.example.com</code>获取数据，但你的应用运行在<code>https://myapp.com</code>。此时，服务器必须配置以下头部以允许跨域请求：

<syntaxhighlight lang="javascript">
// 服务器响应示例
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type
</syntaxhighlight>

如果未配置这些头部，浏览器会阻止请求并抛出CORS错误。

== 处理CORS错误 ==
如果遇到CORS错误，可以采取以下措施：
1. '''检查服务器配置'''：确保服务器返回正确的CORS头部。
2. '''使用代理'''：通过后端服务器代理请求以避免浏览器限制。
3. '''JSONP（仅限GET请求）'''：一种旧式跨域技术（不推荐用于新项目）。

== 高级主题 ==
=== 凭据与CORS ===
如果需要发送Cookies或HTTP认证信息，需设置<code>credentials: 'include'</code>，且服务器必须返回<code>Access-Control-Allow-Credentials: true</code>。

<syntaxhighlight lang="javascript">
fetch('https://api.example.com/data', {
  credentials: 'include'
});
</syntaxhighlight>

=== CORS与WebSocket ===
WebSocket不受同源策略限制，但可以通过<code>Origin</code>头部实现类似的安全检查。

== 总结 ==
CORS是JavaScript中实现跨域请求的核心机制。理解其工作原理和配置方法对于开发现代Web应用至关重要。通过正确配置服务器头部和处理预检请求，可以安全地实现跨域资源访问。

== 参见 ==
* [[Same-Origin Policy]]
* [[Fetch API]]
* [[HTTP Headers]]

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript网络请求]]