在开发前端应用程序时，经常会遇到需要进行跨域请求的情况。Webpack 是一个非常流行的前端构建工具，但默认情况下，Webpack 开发服务器并不支持跨域请求。本文将介绍如何在 Webpack 开发环境中实现跨域请求。
什么是跨域请求？
跨域请求是指发起请求的域名与接收请求的域名不同。例如，当你在 localhost:8080 发起一个请求到 api.example.com 时，这就是一个跨域请求。
跨域请求存在一些安全风险，因为它可以让网站获取到其他网站的敏感信息。因此，浏览器默认情况下禁止跨域请求。
Webpack 开发环境的跨域问题
Webpack 提供了一个开发服务器，它可以在本地启动一个 Web 服务器来运行你的应用程序。默认情况下，Webpack 开发服务器只能在本地使用，因为它只监听 localhost:8080 等本地端口。如果你尝试从开发服务器中发起一个跨域请求，你将会遇到一个错误：
Access to XMLHttpRequest at 'http://api.example.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这是因为浏览器默认情况下禁止跨域请求，除非接收请求的服务器明确允许来自其他域的请求。
解决跨域问题的方法
有几种方法可以解决跨域问题。下面我们将介绍其中两种方法。
方法一：使用 Webpack 代理
Webpack 提供了一个代理功能，可以将开发服务器中的请求代理到另一个服务器上。这个代理功能可以用来解决跨域请求的问题。
首先，在 Webpack 配置文件中添加一个代理选项，如下所示：
// javascriptcn.com 代码示例
module.exports = {
// ...
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
},
},
},
};这个配置的含义是，当你在开发服务器中发起一个 /api 的请求时，Webpack 会将这个请求代理到 http://api.example.com 上。
接下来，在你的代码中发起一个请求，如下所示：
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data));这个请求将会被代理到 http://api.example.com/data 上。
方法二：在服务器中设置 CORS 头
另一种解决跨域问题的方法是，在接收请求的服务器中设置 CORS 头。这个方法适用于你无法修改 Webpack 配置文件的情况。
在服务器中设置 CORS 头很简单，只需要在响应中添加一个 Access-Control-Allow-Origin 头即可：
app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
});这个头告诉浏览器，所有来源的请求都是允许的。你也可以将 * 替换为某个特定的域名，以限制允许的来源。
总结
在开发前端应用程序时，跨域请求是一个常见的问题。Webpack 提供了一个代理功能，可以将开发服务器中的请求代理到另一个服务器上。另外，你也可以在接收请求的服务器中设置 CORS 头来解决跨域问题。无论哪种方法，都可以帮助你在 Webpack 开发环境中实现跨域请求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655e09b0d2f5e1655d8541a2