JavaScript CORS

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

介绍

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

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

CORS 请求类型

CORS请求分为两类：

简单请求（Simple Request）

简单请求满足以下条件：

• 使用GET、HEAD或POST方法。
• 仅包含允许的头部（如Accept、Accept-Language、Content-Language、Content-Type等）。
• Content-Type为application/x-www-form-urlencoded、multipart/form-data或text/plain。

示例：

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'text/plain'
  }
})
.then(response => response.json())
.then(data => console.log(data));

预检请求（Preflight Request）

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

示例：

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));

CORS 头部

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

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

实际案例

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

// 服务器响应示例
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

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

处理CORS错误

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

高级主题

凭据与CORS

如果需要发送Cookies或HTTP认证信息，需设置credentials: 'include'，且服务器必须返回Access-Control-Allow-Credentials: true。

fetch('https://api.example.com/data', {
  credentials: 'include'
});

CORS与WebSocket

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

总结

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

参见

• Same-Origin Policy
• Fetch API
• HTTP Headers