HTML静态内容部署在多域名环境下的跨域资源共享配置

HTML 中设置 Access-Control-Allow-Origin 无效，因为浏览器只检查 HTTP 响应头而非 HTML meta 标签；http-equiv 不支持 CORS 相关字段，且 CORS 配置必须由服务端响应头控制。

HTML 本身不配 CORS，所有跨域资源共享配置必须由服务端响应头控制；静态内容部署在多域名环境时，前端改 HTML、加 meta 或改 script 标签属性都不能绕过浏览器的 CORS 校验。

很多人在 <head> 里加 <meta http-equiv="Access-Control-Allow-Origin" content="*">，这完全无效。原因很直接：

浏览器只检查 HTTP 响应头里的 Access-Control-Allow-Origin 字段，不解析 HTML 中任何 meta 标签
http-equiv 只支持极少数可被 HTML 解析的响应头（如 Content-Type、Refresh），Access-Control-* 全部不在支持列表中
哪怕你本地改了 HTML、清缓存、重开浏览器，只要服务器没返回对应头，CORS 错误照常出现

不是所有跨域加载都触发 CORS 校验。是否要配，关键看后续有没有脚本读取行为：

<img src="https://cdn.example.com/photo.jpg">：默认不触发 CORS，图片能显示；但若后续用 canvas.drawImage() 读像素 → 必须加 crossorigin="anonymous"，且服务端返回 Access-Control-Allow-Origin: *
<script src="https://cdn.example.com/lib.js"></script>：默认不触发；加了 crossorigin="anonymous" 后才触发校验，否则 JS 错误堆栈会变成模糊的 "Script error."
<link rel="stylesheet" href="https://fonts.example.com/style.css">：不加 crossorigin 就静默加载，但 JS 无法通过 CSSOM 读取样式规则
<video src="https://media.example.com/clip.mp4" crossorigin></video>：加了 crossorigin 才能用 JS 获取视频元数据（如时长、尺寸）

如果你把静态资源（JS/CSS/图片/字体）托管在阿里云 OSS、华为云 OBS 或 DCDN，CORS 规则必须在对应平台控制台里配置，不是前端能改的：

立即学习“前端免费学习笔记（深入）”；

允许的来源：填具体域名，比如 https://app1.example.com、https://app2.example.com；如果用了 credentials: 'include'，就不能填 *
允许的方法：至少包含 GET（静态资源基本都走 GET），预检请求必须有 OPTIONS
允许的头域：如果前端发了 Authorization 或自定义头（如 X-Client-ID），这里就得显式列出
缓存时间：Access-Control-Max-Age 设为 0 或 600，避免调试时规则不刷新（OSS 控制台新建规则后最多延迟 2 分钟生效）

一旦你在 fetch 中设了 credentials: 'include' 或 xhr 设置了 withCredentials = true，服务端就必须同时满足两个条件：

返回 Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin 的值不能是 *，必须精确匹配请求头里的 Origin 字符串（比如 https://admin.example.com:8080）

漏掉任一条件，浏览器直接拒绝请求，连预检都不会发出去。这点在多域名管理后台共用一套静态资源时特别容易踩坑——一个域名配了 *，另一个却带凭据，结果后者全挂。

文章来自机圈观察员网，发布者：，转载请注明出处：https://www.jqgcy.com/xinjizixun/123984.html