网站开发前端课程外国语学院英文网站建设

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.

解决方案

1. Webpack 配置

在 webpack.config.js 中启用跨域加载策略：
module.exports = {
output: {
publicPath: “https://cdn.my-app.com/”, // 资源托管在 CDN
crossOriginLoading: “anonymous”, // 添加 crossorigin=“anonymous”
},
};

2. Webpack 会为动态加载的 <script> 标签添加 crossorigin=“anonymous” 属性

<script src=“https://cdn.my-app.com/main.js” crossorigin=“anonymous”></script>

3. 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. 验证效果

1. 浏览器 Network 面板

• 检查 JS 文件的请求头：

Origin: https://my-app.com

• 检查响应头：

Access-Control-Allow-Origin: *

2. 错误信息捕获

• 启用 crossOriginLoading 后，通过 window.onerror 可捕获更详细的跨域脚本错误：

window.onerror = function (message, source, lineno, colno, error) {
console.log(“脚本错误详情:”, error);
};