CORS 详解

跨源资源共享完整指南——工作原理、每个请求头详解以及常见错误与修复方法。

概述

什么是CORS？

跨源资源共享（CORS）是一种基于HTTP头部的机制，允许服务器指示除其自身之外的任何来源（域名、协议或端口），浏览器应允许从这些来源加载资源。浏览器默认执行同源策略，该策略阻止网页向与提供该页面的来源不同的来源发出请求。

同源策略

如果两个URL共享相同的协议（http/https）、主机和端口，则它们具有相同的来源。例如，https://app.example.com和https://api.example.com是不同的来源，因为主机不同。同源策略防止恶意网站读取另一个网站的敏感数据——CORS是以受控方式放宽此限制的机制。

简单请求 vs. 预检

“简单请求”使用GET、HEAD或POST，仅包含CORS安全列表中的头部，不会触发预检。所有其他跨源请求——使用PUT或DELETE等方法，或包含Authorization等头部的请求——会触发预检：浏览器先发送OPTIONS请求向服务器请求权限，然后才发送实际请求。

CORS 工作原理

简单请求

浏览器

GET /api/data
Origin: https://app.example.com

↓

服务器

200 OK
Access-Control-Allow-Origin: *

↓

✓ 响应共享给 JS

预检请求

浏览器

OPTIONS /api/data
Access-Control-Request-Method: DELETE

↓

服务器

204 No Content
Access-Control-Allow-Methods: DELETE

↓

浏览器

DELETE /api/data
Origin: https://app.example.com

↓

✓ 响应共享给 JS

CORS 请求头

显示 10/10

常见错误

显示 8/8

在 RequestDock 中试试

发送真实的 HTTP 请求并检查响应——直接在浏览器中完成。

打开 RequestDock

CORS 详解

概述

什么是CORS？

同源策略

简单请求 vs. 预检

CORS 工作原理

简单请求

预检请求

CORS 请求头

常见错误

相关指南

HTTP 状态码

HTTP 请求头

HTTP 方法

MIME 类型

在 RequestDock 中试试

概述

什么是CORS？

同源策略

简单请求 vs. 预检

CORS 工作原理

简单请求

预检请求

CORS 请求头

Access-Control-Allow-Origin响应必需

Access-Control-Allow-Methods响应必需

Access-Control-Allow-Headers响应必需

Access-Control-Allow-Credentials响应可选

Access-Control-Expose-Headers响应可选

Access-Control-Max-Age响应可选

Access-Control-Request-Method请求必需

Access-Control-Request-Headers请求可选

Origin请求必需

Vary响应可选

常见错误

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*' when the request's credentials mode is 'include'.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Access to fetch at 'https://api.example.com/data' (redirected from 'https://api.example.com/old') from origin 'https://app.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

Refused to get unsafe header 'X-Request-Id'

相关指南

HTTP 状态码

HTTP 请求头

HTTP 方法

MIME 类型

在 RequestDock 中试试