在前端开发中，我们经常需要加载 json 文件来获取数据。然而，由于浏览器的同源策略限制，我们不能直接通过 Ajax 请求跨域加载 json 文件。这时，我们就可以使用 Webpack 提供的一些工具来实现跨域加载 json 文件。
JSONP
JSONP 是一种在跨域请求数据时常用的方式。它的原理是利用 script 标签可以跨域加载 js 文件的特性，将返回的数据封装在一个 js 函数中，然后通过 script 标签执行这个函数来获取数据。
在 Webpack 中使用 JSONP 加载 json 文件非常简单。我们只需要在配置文件中设置 output.jsonpFunction 属性，然后在代码中使用 import() 函数来加载 json 文件即可。
-- -----------------
-------------- - -
------- -
-------------- -----------------
-
--
-- --------
--------- ----------------- ------ -- ------------------------ -- -
------------------
-------------- -- -
---------------------
---在上面的示例中，我们将 output.jsonpFunction 属性设置为 myJsonpFunction，然后使用 import() 函数来加载 json 文件。Webpack 会将 json 文件打包成一个独立的 chunk，并将其封装在一个名为 myJsonpFunction 的函数中。当我们执行 import() 函数时，Webpack 会在页面中动态添加一个 script 标签，通过执行 myJsonpFunction 函数来获取数据。
需要注意的是，使用 JSONP 加载 json 文件会创建一个全局变量，因此可能会存在命名冲突的问题。为了避免这种情况，我们可以将 output.jsonpFunction 属性设置为一个随机字符串，或者使用 jsonp-loader 来自动为我们生成一个随机函数名。
CORS
除了 JSONP，我们还可以使用 CORS（跨域资源共享）来加载 json 文件。CORS 是一种浏览器机制，它允许服务器在响应中添加一些特殊的头部信息，告诉浏览器哪些域名可以访问该资源。
在 Webpack 中，我们可以使用 cors-anywhere 这个工具来实现 CORS。
首先，我们需要在服务器上部署一个 cors-anywhere 代理服务。这个服务会将请求转发到目标服务器，并在响应中添加 CORS 头部信息。我们可以使用 Heroku 来免费部署一个 cors-anywhere 服务。
然后，在配置文件中设置 devServer.proxy 属性，将请求转发到 cors-anywhere 服务上。最后，在代码中使用相对路径来加载 json 文件即可。
-- -----------------
-------------- - -
---------- -
------ -
------------- -
------- --------------------------------------------------------------------
------------- ----
-
-
-
--
-- --------
--------------------------------- -- -
-----------------------------
-------------- -- -
---------------------
---在上面的示例中，我们将 /data.json 请求转发到 https://cors-anywhere.herokuapp.com/https://example.com/data.json，然后在代码中使用相对路径来加载 json 文件。
需要注意的是，使用 CORS 加载 json 文件需要依赖服务器端的支持。如果目标服务器不支持 CORS，我们可能需要使用其他的跨域解决方案。
总结
在本文中，我们介绍了如何使用 Webpack 来跨域加载 json 文件。我们可以使用 JSONP 来将 json 文件封装在一个函数中，或者使用 CORS 来在服务器端添加 CORS 头部信息。这些方法都有其适用的场景，我们需要根据实际情况来选择适合自己的解决方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66279230c9431a720c43de25