编辑“︁HTML跨域资源共享 (CORS)”︁（章节）

= HTML跨域资源共享 (CORS) =

'''跨域资源共享'''（Cross-Origin Resource Sharing，简称CORS）是一种基于HTTP头的机制，允许服务器指示浏览器允许或拒绝来自不同源（域、协议或端口）的网页请求。它是现代Web开发中处理跨域请求的标准方式。

== 介绍 ==

在Web开发中，出于安全考虑，浏览器会实施'''同源策略'''（Same-Origin Policy），限制来自不同源的脚本与资源交互。CORS提供了一种安全的方式，允许服务器声明哪些外部源可以访问其资源。

=== 为什么需要CORS ===
* 现代Web应用常常需要从多个域加载资源（如API、字体、图像）
* 同源策略会阻止这些合法的跨域请求
* CORS提供了一种标准化的方式来解决这个问题

== 基本概念 ==

=== 同源与不同源 ===
两个URL在以下情况下被认为是'''同源'''：
* 相同的协议（http/https）
* 相同的主机名（domain）
* 相同的端口号

例如：
* <code>https://example.com/page1</code> 和 <code>https://example.com/page2</code> - 同源
* <code>https://example.com</code> 和 <code>http://example.com</code> - 不同源（协议不同）
* <code>https://example.com</code> 和 <code>https://api.example.com</code> - 不同源（主机名不同）

== CORS工作原理 ==

CORS通过HTTP头来实现跨域请求的控制。以下是CORS的基本流程：

<mermaid>
sequenceDiagram
    Client->>Server: 发送跨域请求 (Origin头)
    Server-->>Client: 响应 (Access-Control-Allow-Origin头)
    alt 允许跨域
        Client->>Server: 继续请求
    else 拒绝跨域
        Client->>Client: 阻止请求
    end
</mermaid>

=== 简单请求 ===
满足以下条件的请求被视为'''简单请求'''：
1. 使用GET、HEAD或POST方法
2. 仅包含安全的头（Accept、Accept-Language、Content-Language等）
3. Content-Type为application/x-www-form-urlencoded、multipart/form-data或text/plain

示例：
<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>

=== 预检请求 ===
不满足简单请求条件的请求会先发送一个OPTIONS方法的'''预检请求'''（Preflight Request），服务器确认允许后才会发送实际请求。

示例：
<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'})
});
</syntaxhighlight>

== HTTP头详解 ==

以下是CORS相关的主要HTTP头：

=== 请求头 ===
* '''Origin''': 指示请求的来源
* '''Access-Control-Request-Method''': 预检请求中声明实际请求的方法
* '''Access-Control-Request-Headers''': 预检请求中声明实际请求的自定义头

=== 响应头 ===
* '''Access-Control-Allow-Origin''': 指定允许访问资源的源
* '''Access-Control-Allow-Methods''': 指定允许的方法
* '''Access-Control-Allow-Headers''': 指定允许的头
* '''Access-Control-Allow-Credentials''': 指定是否允许发送凭据
* '''Access-Control-Max-Age''': 指定预检请求的缓存时间

== 服务器配置示例 ==

=== Node.js (Express) ===
<syntaxhighlight lang="javascript">
const express = require('express');
const app = express();

// 基本CORS配置
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 带凭证的CORS配置
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://trusted.example.com');
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
});
</syntaxhighlight>

=== PHP ===
<syntaxhighlight lang="php">
<?php
header("Access-Control-Allow-Origin: https://trusted.example.com");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
?>
</syntaxhighlight>

== 实际应用场景 ==

=== 场景1：跨域API调用 ===
前端应用（<code>https://app.example.com</code>）需要调用API（<code>https://api.example.com</code>）

=== 场景2：CDN资源访问 ===
主站（<code>https://www.example.com</code>）需要从CDN（<code>https://cdn.example.net</code>）加载字体或脚本

=== 场景3：微服务架构 ===
多个服务部署在不同子域下需要相互通信

== 安全注意事项 ==

* 谨慎使用<code>Access-Control-Allow-Origin: *</code>，特别是涉及敏感数据时
* 对于需要凭证的请求，必须指定具体的源而非通配符
* 限制允许的方法和头，遵循最小权限原则
* 考虑使用CSRF令牌等额外安全措施

== 常见问题 ==

=== 如何解决CORS错误？ ===
1. 检查服务器是否正确设置了CORS头
2. 确保请求符合简单请求条件或正确处理了预检请求
3. 对于需要凭证的请求，设置<code>credentials: 'include'</code>（fetch API）或<code>withCredentials: true</code>（XHR）

=== JSONP与CORS有什么区别？ ===
JSONP是早期解决跨域问题的技术，只支持GET请求，安全性较差。CORS是更现代、更安全的解决方案，支持所有HTTP方法。

== 高级主题 ==

===  credentialed请求 ===
需要发送cookie或HTTP认证信息的请求必须：
* 服务器设置<code>Access-Control-Allow-Credentials: true</code>
* <code>Access-Control-Allow-Origin</code>不能为<code>*</code>
* 客户端设置withCredentials标志

=== 预检请求缓存 ===
通过<code>Access-Control-Max-Age</code>头可以减少不必要的预检请求。

== 总结 ==

CORS是现代Web开发中处理跨域请求的标准机制。理解CORS的工作原理和配置方法对于开发需要跨域资源访问的Web应用至关重要。正确配置CORS既能满足功能需求，又能保障应用安全性。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML安全性]]