html本身不能配置cors，cors由服务器响应头（如access-control-allow-origin）控制；meta标签无效，crossorigin属性仅声明读取意图，需服务端配合；fetch、xmlhttprequest等主动请求才触发cors校验。
HTML 本身不能实现跨域资源共享的组件接口 —— 它不提供任何配置或声明式能力来开启、绕过或模拟 CORS。 所有前端写的 <meta>、crossorigin 属性、甚至动态插入 <script></script>，都不等于“实现接口”，只是触发或适配服务端已存在的 CORS 授权。
为什么 <meta http-equiv="Access-Control-Allow-Origin"> 完全无效
浏览器明确忽略该标签对 CORS 相关头的声明。原因很直接：
-
Access-Control-Allow-Origin是强制校验型响应头，只能由服务端在 HTTP 响应中真实返回 -
meta http-equiv仅支持极少数可被 HTML 解析的头（如Content-Type、Refresh），不包含任何Access-Control-*字段 - 哪怕你本地改了 HTML、清缓存、重开浏览器，只要后端没返回正确头，
fetch()或XMLHttpRequest仍会报错
crossorigin 属性不是“开启跨域”，而是“声明读取意图”
它只影响资源加载行为，且必须和服务端响应头配合才有意义：
-
<img src="https://cdn.example.com/photo.jpg?x-oss-process=image/resize,p_40" crossorigin="anonymous">：告诉浏览器“我要用 JS 读像素”，于是浏览器发 Origin 头，并检查服务端是否返回Access-Control-Allow-Origin: * -
<script src="https://lib.example.com/index.js" crossorigin="use-credentials"></script>：要求服务端返回Access-Control-Allow-Credentials: true和精确匹配的Access-Control-Allow-Origin（不能是*） - 没加
crossorigin的<img>或<script></script>能加载成功，但 JS 后续无法读取内容（如 canvas.drawImage() 报 “Tainted canvas”，fetch()报 “No 'Access-Control-Allow-Origin' header”）
真正触发 CORS 校验的只有脚本主动发起的请求
以下操作才会走完整 CORS 流程（包括预检 OPTIONS）：
-
fetch('https://api.other.com/data')：无论 GET/POST，只要跨域就触发 -
new XMLHttpRequest().open('PUT', 'https://api.other.com/update')：方法非 GET/HEAD，触发预检 -
fetch(url, { headers: { 'X-Auth-Token': 'xxx' } })：自定义非简单头，触发预检 -
fetch(url, { credentials: 'include' })：要求带 cookie，服务端必须返回Access-Control-Allow-Credentials: true且Access-Control-Allow-Origin不能为*
前端能做的只有“适配”，不是“实现”
所谓“组件接口”的跨域能力，本质是组件使用者与服务端约定好 CORS 策略后的协同结果：
- 若组件封装了
fetch请求，它只能控制credentials、mode、headers等选项，但无法让服务端多返回一个头 - 若组件依赖
<img crossorigin>渲染并分析图片，它必须文档注明：“请确保图片服务返回Access-Control-Allow-Origin” - 常见翻车点：Vue/React 组件库文档写“支持跨域图片”，但用户传入未配 CORS 的 URL，结果 canvas 污染、宽高读不到 —— 错不在组件，而在服务端没配
最容易被忽略的一点：CORS 规则生效有延迟。比如你在阿里云 OSS 控制台刚开启跨域配置，CDN 缓存或浏览器 Preflight 缓存可能让旧策略继续生效数分钟。不要只刷新页面，要查 Network → Headers → Response Headers 是否真有对应字段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
