HTML本身不能配置CORS,CORS由服务器响应头(如Access-Control-Allow-Origin)控制,浏览器只校验HTTP响应头而非HTML内容;meta标签无效,仅fetch、XMLHttpRequest等主动请求触发校验。

HTML 本身不能“设置” CORS —— 它没有配置跨域的能力。CORS 是服务器通过响应头控制的,浏览器只负责检查和拦截。你在 HTML 里写的 <script>、<img> 或发起的 fetch(),都只是触发方,真正的授权逻辑在服务端。
为什么在 HTML 中加 crossorigin 属性没用?
这个属性只影响资源加载行为(比如 <img>、<script>、<link rel="stylesheet">),它告诉浏览器:“请带上 Origin 头,并要求服务器返回 Access-Control-Allow-Origin”。但它不等于开启 CORS,也不改变服务器是否允许你读取响应内容。
- 加了
crossorigin="anonymous",但服务器没返回Access-Control-Allow-Origin→ 图片/脚本能加载,但 JS 无法读取 canvas 像素或 script 的错误堆栈(会报 “Tainted canvas” 或 “Script error.”) - 加了
crossorigin="use-credentials",但服务器没返回Access-Control-Allow-Credentials: true→ 请求直接被浏览器拒绝,连预检都过不去 -
<script src="https://cdn.example.com/lib.js"></script>不加crossorigin→ 浏览器不发 Origin 头,也不校验 CORS,但你无法用 JS 捕获该 script 的运行时错误细节
fetch() 和 XMLHttpRequest 发起跨域请求时的关键控制点
前端能主动干预的只有请求发起时的选项,而这些选项会直接影响服务器必须返回哪些响应头,否则浏览器直接拦截。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
credentials: 'include'(或xhr.withCredentials = true)→ 服务端必须返回Access-Control-Allow-Credentials: true,且Access-Control-Allow-Origin不能是*,必须是精确匹配的源(如https://myapp.com) - 手动设置了非简单请求头,比如
headers: { 'X-Auth-Token': 'xxx' }→ 触发预检(OPTIONS),服务端必须响应Access-Control-Allow-Headers: X-Auth-Token - 用了
method: 'PUT'或'DELETE'→ 同样触发预检,服务端需返回Access-Control-Allow-Methods: PUT, DELETE - 没设
credentials,但服务端返回了Access-Control-Allow-Origin: *→ 可以读响应体,但拿不到 set-cookie
Gin / Express / Koa 等后端框架配 CORS 的常见翻车点
很多开发者以为配个中间件就万事大吉,结果上线后发现带 cookie 的请求失败、上传文件报错、自定义 header 被拦——问题几乎全出在响应头组合上。
立即学习“前端免费学习笔记(深入)”;
- 用
*作为Access-Control-Allow-Origin值,同时又开了withCredentials→ 浏览器报错:Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' - 预检响应(OPTIONS)里漏了
Access-Control-Allow-Headers,而前端恰好发了Content-Type: application/json→ 报错:Request header field content-type is not allowed by Access-Control-Allow-Headers - 没处理 OPTIONS 请求,或返回了 404/500 → 预检失败,后续请求根本不会发出
- 多个中间件叠加(比如先走 auth 再走 cors),但 OPTIONS 请求被 auth 拦截 → 预检卡死,查日志才发现 OPTIONS 根本没进 cors 中间件
最常被忽略的是:CORS 不是“开个开关”,而是浏览器和服务端之间一套严格匹配的 HTTP 头契约。前端改一个 credentials,后端就要同步调整三个响应头;前端多传一个自定义 header,后端就得显式放行它。任何一环没对齐,整个请求链就断在预检或响应阶段。

















