背景
当我们使用 Webpack 进行 React 项目开发时，经常会遇到与服务器 API 的跨域问题。跨域问题是由于浏览器限制了 JavaScript 访问与当前页面不同源的资源，而产生的一种安全机制。如何在开发中解决跨域问题，是每个前端工程师需要掌握的技能之一。
解决方法
1. 使用代理
在开发环境中，我们可以使用代理服务器来转发客户端请求，以解决跨域问题。Webpack 提供了 devServer.proxy 选项来实现代理的配置。下面是一个示例：
// javascriptcn.com 代码示例
/* webpack.config.js */
module.exports = {
// ...其他配置项
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}此配置代理服务器将所有以 /api 开头的请求都转发到 http://localhost:3000，并将这些请求的域改为与目标域一致。而 pathRewrite 选项则指定了在转发过程中，将原本以 /api 开头的请求路径重写为以根路径 / 开头。
代理方式可以有效地解决跨域问题，但由于增加了代理服务器，会导致开发时的请求速度变慢，并且部署时也需要考虑额外的代理服务器部署成本。
2. 修改服务端响应头
修改服务端响应头是另一种解决跨域问题的方式。我们可以使用浏览器允许的一些响应头信息来告知浏览器当前的源与目标源是可以进行通信的。下面是示例代码：
// javascriptcn.com 代码示例
/* express 服务端代码 */
const express = require('express')
const app = express()
app.get('/api', (req, res) => {
res.set('Access-Control-Allow-Origin', '*')
res.send('Hello World')
})
app.listen(3000, () => {
console.log('Server is running on port 3000')
})以上代码使用 Express 实现了一个 /api 接口，当客户端使用 XMLHttpRequest 或 fetch 请求该接口时，服务端会在响应头中加上 'Access-Control-Allow-Origin': '*'，表示允许所有 Origin 访问该接口。
修改服务端响应头的方式优点在于不需要额外增加代理服务器，并且可以灵活控制客户端的访问权限。但这种方式需要服务端配合，而开放所有访问权限也增加了安全性的隐患。
总结
以上两种解决跨域问题的方式各有优缺点，通过在开发中实践并结合项目的特点选择合适的跨域方式，是每个前端工程师需要具备的技能之一。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651c25c195b1f8cacd3b63d6