【转】[Vue] WebPack 中 proxy 的用法

转自：kimi.ai

参考：https://webpack.js.org/configuration/dev-server

在 Webpack 中，
proxy 通常与
webpack-dev-server 配合使用，用于解决开发环境下的跨域问题。当你的前端应用需要向后端 API 发起请求，但后端服务运行在不同的域名或端口时，浏览器的同源策略会阻止请求。通过配置
proxy，可以将请求转发到目标服务器。 以下是
proxy 的基本用法和一些常见配置：

基本用法

在
webpack.config.js 或
webpack.dev.js 文件中，配置
devServer.proxy 属性。例如：
JavaScript复制

const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, devServer: { static: { directory: path.join(__dirname, 'dist') }, proxy: { '/api': { target: 'http://localhost:3000', // 后端服务的地址 changeOrigin: true, // 允许跨域 pathRewrite: { '^/api': '' // 重写路径 } } } } };

在这个例子中：

1. 当前端请求 /api 路径时， webpack-dev-server 会将请求转发到 http://localhost:3000。
2. changeOrigin: true 允许跨域，避免浏览器的同源策略限制。
3. pathRewrite 用于重写路径，将 /api 前缀移除，转发到后端时路径变为 /。

配置选项

以下是
proxy 的一些常用配置选项：

1. target

指定目标服务器的地址。例如：
JavaScript复制

target: 'http://localhost:3000'

2. changeOrigin

允许跨域请求。通常设置为
true，以避免浏览器的同源策略限制：
JavaScript复制

changeOrigin: true

3. pathRewrite

用于重写路径。例如，将
/api 前缀移除：
JavaScript复制

pathRewrite: { '^/api': '' }

4. secure

默认情况下，
proxy 会验证目标服务器的 SSL 证书。如果目标服务器使用自签名证书，可以将其设置为
false：
JavaScript复制

secure: false

5. bypass

允许自定义请求的处理逻辑。例如，某些请求直接返回本地文件：
JavaScript复制

bypass: function (req, res, proxyOptions) { if (req.headers.accept.indexOf('html') !== -1) { console.log('Skipping proxy for browser request.'); return '/index.html'; } }

6. logLevel

控制日志输出级别。例如：
JavaScript复制

logLevel: 'debug'

多个代理配置

如果需要代理多个路径，可以这样配置：
JavaScript复制

proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true }, '/auth': { target: 'http://localhost:4000', changeOrigin: true } }

注意事项

1. 仅适用于开发环境： proxy 是 webpack-dev-server 的功能，仅在开发环境中生效。生产环境需要通过其他方式（如 Nginx 反向代理）解决跨域问题。
2. 路径匹配规则： proxy 的路径匹配是基于请求路径的前缀。例如， /api 会匹配 /api/user、 /api/posts 等。
3. 调试日志：如果配置有问题，可以通过设置 logLevel: 'debug' 查看详细的代理日志。

通过合理配置
proxy，可以方便地解决开发环境下的跨域问题，提高开发效率。

来源链接：https://www.cnblogs.com/z5337/p/18689480