当我们在使用 Webpack 打包项目时，常常会遇到如下问题：引入的外部资源的 URL 不是以 http 或 https 开头，导致资源载入失败，这时候我们需要在资源 URL 前面添加 crossorigin 属性。而 crossorigin-webpack-plugin 就是一个解决这个问题的 npm 包。下面为大家详细介绍它的使用方法。
什么是 crossorigin-webpack-plugin？
crossorigin-webpack-plugin 是一个 Webpack 插件，它可以自动给 Webpack 打包生成的 js 文件中的静态资源加上 crossorigin 属性，避免了跨域问题，特别适用于 CDN 资源。
安装
安装 crossorigin-webpack-plugin，只需要在项目目录下执行以下命令：
npm install crossorigin-webpack-plugin --save-dev
使用方法
在使用 crossorigin-webpack-plugin 之前，我们需要了解一下 crossorigin 属性以及它的属性值，这对后面的插件设置很有帮助。
crossorigin 属性
该属性在 CORS（跨域资源共享）中使用。它告诉浏览器，是否有权利将一个请求交给其他的源，以便该源可以使用该请求的返回数据。
该属性具有以下属性值：
anonymous：跨域请求会发送 origin 头部但不会发送带有凭据的请求头部。use-credentials：跨域请求会发送 origin 和 cookie 头部。
配置插件
在 webpack.config.js 文件中的 plugins 下添加如下代码:
-- -------------------- ---- -------
----- ------------------------ - -------------------------------------
-------------- - -
-- ---
-------- -
--- --------------------------
------------ -----------------
--
-
-以上配置表示，将资源 URL 前添加 crossorigin 属性，属性值为 use-credentials。
另外，我们还可以将该插件的函数封装到一个自己定义的函数中，以便实现更为复杂的功能。示例如下：
-- -------------------- ---- -------
----- ------------------------ - -------------------------------------
-------- ---------------------- -
------ -
-----------
-------- -
--- --------------------------
------------ -----------------
---
-- -------
-
-
-示例代码
以下是一个简单示例代码，用来显示如何使用 crossorigin-webpack-plugin，以及观察资源 URL 是否正常添加了 crossorigin 属性。
在 webpack.config.js 文件中添加如下代码：
-- -------------------- ---- -------
----- ---- - ---------------
----- ----------------- - ------------------------------
----- - ------------------ - - -------------------------------
----- ------------------------ - -------------------------------------
-------------- - -
----- --------------
-------- --------------------
------ -----------------
------- -
--------- --------------------------
----- ----------------------- --------
--
------------- -
---------- ---------
------------ -
------------ -
------- -
----- -------------------------
----- ----------
------- ------
--
--
--
------------- ---------
--
-------- -
--- ---------------------
--- -------------------
------ ----------
---
--- --------------------------
------------ -----------
---
--
------- -
------ -
-
----- ---------
---- ---------------- --------------
--
--
--
-以上代码将会在资源 URL 中添加 crossorigin="anonymous"。此外，在 index.html 中，我们也需要引进外部资源。假设外部资源如下：
<body> <h1>Hello World</h1> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="./src/script.js"></script> </body>
其中，script.js 为引进本地资源。接下来，我们通过浏览器打开生成的 index.html 网页，检查其资源 URL 是否已成功添加 crossorigin 属性：
<body> <h1>Hello World</h1> <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script> <script src="./src/script.js" crossorigin="anonymous"></script> </body>
可以看到，通过使用 crossorigin-webpack-plugin，我们成功在资源 URL 前添加了 crossorigin 属性。这样，浏览器进行跨域请求时，就可以顺利加载外部资源了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734f890c4f727758384a