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);
};
)
