HTML中的crossorigin属性有什么用？-html教程-PHP中文网

crossorigin属性仅对、、（rel为stylesheet或preload+as=font等）、、生效，需配合服务端CORS响应头才有效；、、等加了也无效。

html中的crossorigin属性有什么用？

crossorigin 属性不是“加了就能跨域”的开关，它只在特定标签上生效，且必须和服务端的 CORS 响应头配合才能起作用；单独加属性，浏览器照样报错、照样拦截。

哪些 HTML 标签支持 crossorigin

只有明确列出的几个元素能用：、<script></script>、（仅当 rel="stylesheet" 或 rel="preload" 且 as="font" 等场景）、、。其他标签如、

、 加了也无效，浏览器直接忽略。常见误操作： —— 这个属性不会触发 CORS 请求，也不会影响 favicon 加载逻辑。
crossorigin="anonymous" 和 crossorigin="use-credentials" 的区别
两者核心差异在于是否携带用户凭证（cookie、HTTP 认证等）：


crossorigin="anonymous"：不带凭证，请求头含 Origin，但不含 Cookie；服务端只需返回 Access-Control-Allow-Origin: https://your-domain.com（不能是 *）即可

crossorigin="use-credentials"：带凭证，请求头同时含 Origin 和 Credentials；服务端必须返回 Access-Control-Allow-Origin: https://your-domain.com + Access-Control-Allow-Credentials: true，缺一不可
不写值（如 <script crossorigin src="..."></script>）等价于 anonymous，但语义模糊，建议显式写出

为什么 script 错误捕获需要 crossorigin
没有 crossorigin 的跨域脚本出错时，window.onerror 只收到 "Script error."，堆栈和文件名全被屏蔽。加上后，只要服务端响应头匹配，就能拿到完整错误信息。
Webpack / Vite 构建的动态 import() chunk 默认不带 crossorigin，一旦部署到 CDN 就无法上报真实错误——这是线上监控失效的高频原因。

											
												
												
													htmlppt.skill
													把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
												
												下载
												
											
										
示例正确写法：<script src="https://cdn.example.com/chunk-abc.js" crossorigin="anonymous"></script>
和 integrity 配合使用时的注意事项
integrity 必须搭配 crossorigin 才会生效。浏览器校验资源 hash 前，先走 CORS 流程；若没加 crossorigin，即使 integrity 值正确，也会因跨域限制跳过校验。
典型组合：<script src="https://cdn.example.com/lib.js" crossorigin="anonymous" integrity="sha384-..."></script>
容易踩的坑：服务端返回了 Access-Control-Allow-Origin: *，但用了 crossorigin="use-credentials" —— 因为 * 和 use-credentials 互斥，浏览器直接拒绝加载。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！