webpack.config怎么配置跨域代理
时间: 2023-12-16 14:38:38 浏览: 30
你可以通过配置 `webpack.config.js` 文件来实现跨域代理。在该文件中,你可以使用 `devServer` 配置项来设置代理。
首先,确保你已经安装了 `http-proxy-middleware` 模块。如果没有安装,可以通过以下命令进行安装:
```
npm install http-proxy-middleware --save-dev
```
然后,在 `webpack.config.js` 文件中添加以下代码:
```javascript
const proxy = require('http-proxy-middleware');
module.exports = {
// ...
devServer: {
// ...
proxy: {
'/api': {
target: 'http://api.example.com', // 设置代理的目标地址
changeOrigin: true, // 是否改变请求的域名
pathRewrite: {
'^/api': '' // 将请求地址中的 '/api' 替换为空字符串
}
}
}
}
};
```
上述代码中,我们通过 `proxy` 配置项设置了一个代理规则。其中 `'/api'` 是需要被代理的请求路径,`target` 是代理的目标地址,`changeOrigin` 表示是否改变请求的域名,`pathRewrite` 则是对请求路径进行重写。
例如,当你发起一个请求 `http://localhost:8080/api/users` 时,Webpack Dev Server 将会将该请求转发到 `http://api.example.com/users`。
这样,你就成功地配置了跨域代理。记得根据你的实际情况修改 `target` 的值和需要代理的请求路径。