crossOriginLoading使用说明
1. 说明
此配置用于控制 Webpack 动态加载的代码块（chunk）（例如代码分割或懒加载的模块）在跨域（不同域名）加载时的行为。它通过为动态生成的 <script>标签添加 crossorigin 属性，确保符合跨域资源共享（CORS）的安全策略
可选值
- false（默认值）😗
不添加 crossorigin 属性到动态加载的 <script> 标签。
适用场景：资源与主应用同域（无跨域需求）- anonymous:
为 <script> 标签添加 crossorigin=“anonymous” 属性。
请求行为：不携带凭据（如 Cookies、HTTP 认证信息）。
服务器要求：响应头需包含 Access-Control-Allow-Origin: * 或明确允许请求的来源域名。- use-credentials:
为 <script> 标签添加 crossorigin=“use-credentials” 属性。
请求行为：携带凭据（如 Cookies、HTTP 认证信息）
服务器要求：响应头需满足：
Access-Control-Allow-Origin: <具体来源域名>（不能为 *）
Access-Control-Allow-Credentials: true
2. 使用场景
具体使用场景示例：主应用与 CDN 跨域加载静态资源
场景描述
- 主应用：部署在 https://my-app.com
- 静态资源（Webpack 打包后的 JS/CSS 文件）托管在 CDN：https://cdn.my-app.com。
- 问题：
当浏览器加载 CDN 上的 JS 文件时，控制台报错：
Access to script at ‘https://cdn.my-app.com/main.js’ from origin ‘https://my-app.com’
has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present.
解决方案
- Webpack 配置
在 webpack.config.js 中启用跨域加载策略：
module.exports = {
output: {
publicPath: “https://cdn.my-app.com/”, // 资源托管在 CDN
crossOriginLoading: “anonymous”, // 添加 crossorigin=“anonymous”
},
};
- Webpack 会为动态加载的 <script> 标签添加 crossorigin=“anonymous” 属性
<script src=“https://cdn.my-app.com/main.js” crossorigin=“anonymous”></script>
- CDN/服务器配置
3.1 在 CDN（如 AWS S3、阿里云 OSS）或 Nginx 服务器中配置 CORS 响应头
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
3.2（若使用 use-credentials，需指定具体域名并开启 Access-Control-Allow-Credentials: true）
3. 验证效果
- 浏览器 Network 面板
- 检查 JS 文件的请求头：
Origin: https://my-app.com
- 检查响应头：
Access-Control-Allow-Origin: *
- 错误信息捕获
- 启用 crossOriginLoading 后，通过 window.onerror 可捕获更详细的跨域脚本错误：
window.onerror = function (message, source, lineno, colno, error) {
console.log(“脚本错误详情:”, error);
};