在前端开发中，跨域请求（CORS）是一个常见的问题。跨域请求是指在一个域名下的网页访问另一个域名下的资源，由于浏览器安全限制，JavaScript 代码默认是无法跨域访问其他域名下的资源的。本文将介绍如何在 webpack 中实现跨域请求。
什么是 CORS
CORS （Cross-Origin Resource Sharing）是一种浏览器安全机制，用于解决跨域问题。通过在服务器端设置响应头来告诉浏览器可以跨域访问该资源。CORS 需要服务器端和客户端的支持，客户端指浏览器，服务器端指数据提供方。如果服务器端不支持 CORS，即使在客户端设置了跨域请求，也会被浏览器限制，无法访问。
使用 webpack-dev-server 代理
在开发环境下，可以使用 webpack-dev-server 提供的代理功能来实现跨域请求。
假设我们需要访问另一个域名下的 API，例如：http://api.example.com。我们可以在 webpack.config.js 中的 devServer 中添加代理配置：
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true
}
}
}其中，'/api' 是代理路径，'http://api.example.com' 是代理目标地址。
changeOrigin表示是否修改请求头中的 Origin 字段，默认为 false。如果设为 true，浏览器发送的请求头中的 Origin 字段将被改为目标地址的域名，从而模拟浏览器向目标地址发送请求，从而绕过浏览器的安全限制。
配置完代理后，我们就可以在代码中使用 /api 进行跨域请求了，例如：
axios.get('/api/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});跨域 Cookies
当浏览器发起跨域请求时，默认不会发送 Cookies。这是因为浏览器通过设置 Cookie 来保存用户登录信息等敏感信息，如果直接发送 Cookie，那么就会有安全风险。但在某些场景下，开发者可能需要发起跨域请求时发起 Cookies，例如需要向另一个域名下的 API 发送身份验证信息。这时，可以在客户端和服务器端都配置一些选项来允许发送 Cookie。
- 客户端
在发送跨域请求时，可以设置 withCredentials 为 true，表示允许跨域请求发送 Cookie。
// www.javascriptcn.com code example
axios.get('/api/users', {
withCredentials: true
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});- 服务器端
服务器端需要设置响应头 Access-Control-Allow-Credentials: true，表示允许跨域请求发送 Cookie。
在使用 webpack-dev-server 进行代理时，需要添加 changeOrigin: true、xfwd: true 以及 headers: { 'Access-Control-Allow-Credentials': 'true' }。
// www.javascriptcn.com code example
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
xfwd: true,
headers: { 'Access-Control-Allow-Credentials': 'true' }
}
}
}实现 JSONP 跨域请求
JSONP (JSON with padding) 是一种跨域解决方案，它的原理是利用 script 标签可以跨域加载资源的特性，将请求的数据包装在一个 JavaScript 函数中，再由服务器返回该 JavaScript 函数的调用语句来实现跨域请求。然而，JSONP 方案本身并没有真正意义上的 HTTP 请求，只是利用了 script 标签的特性。当接口需要使用 POST 请求时，JSONP 就无法实现跨域请求。
下面是一个实现 JSONP 跨域请求的示例：
// www.javascriptcn.com code example
function jsonp(url, callback) {
// 创建 script 标签，并设置资源路径
let script = document.createElement('script');
script.src = url;
// 将回调函数挂载到 window 对象上
window[callback] = function (data) {
console.log(data);
};
// 将 script 标签插入页面中
document.body.appendChild(script);
// 加载完毕后，删除 script 标签和挂载的回调函数
script.onload = function () {
document.body.removeChild(script);
delete window[callback];
};
}使用该函数进行跨域请求：
jsonp('http://api.example.com/users?callback=handleResponse', 'handleResponse');以上就是在 webpack 中实现跨域请求的方法。要注意安全，避免跨站脚本攻击（XSS）。同时，跨域请求会增加网络请求的延迟，应该合理使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d67152a941bf7134c34fed