[JavaScript知识库]webpack 中的 proxy 代理

不使用代理请求接口

以 axios 为例，前端配置 axios 的 baseURL 为你的接口公共请求路径，每当调用接口时会在请求路径前加上你的 baseURL ,即接口完整请求路径为baseURL + 你的接口路径

//例如
const service = axios.create({
  baseURL: 'http://127.0.0.1:80', // baseURL
  timeout: 9000 // 请求超时时间
})
// 如果你的接口路径为 '/user/userInfo'
// 则完整请求路径为 http://127.0.0.1:80/user/userInfo

使用 proxy 代理请求接口

首先将 axios 的 baseURL 配置为你要代理的路径

//例如
const service = axios.create({
  baseURL: '/api', // baseURL
  timeout: 9000 // 请求超时时间
})

然后配置 config.js 文件 proxy

devServer: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://www.baidu.com:8000', // 将 '/api' 代理为 'http://www.baidu.com:8000/api'
        ws: false,	// 是否代理 websocket
        pathRewrite: {"^/api" : ""}, // 'http://www.baidu.com:8000/api' 重写为 'http://www.baidu.com:8000/'
        changeOrigin: true, // 代理时不显示主机头的真实来源
		secure: false, // 不验证 https 证书
		context: ['/auth', '/api'],	// 将多个路径代理到同一个 target 下
      },
    }
  },

proxy 更多参数

• target：要使用url模块解析的url字符串
• forward：要使用url模块解析的url字符串
• agent：要传递给http（s）.request的对象（请参阅Node的https代理和http代理对象）
• ssl：要传递给https.createServer（）的对象
• ws：true / false，是否代理websockets
• xfwd：true / false，添加x-forward标头
• secure：true / false，是否验证SSL Certs
• toProxy：true / false，传递绝对URL作为路径（对代理代理很有用）
• prependPath：true / false，默认值：true - 指定是否要将目标的路径添加到代理路径
• ignorePath：true / false，默认值：false - 指定是否要忽略传入请求的代理路径（注意：如果需要，您必须附加/手动）。
• localAddress：要为传出连接绑定的本地接口字符串
• changeOrigin：true / false，默认值：false - 将主机标头的原点更改为目标URL

proxy 解决跨域

使用 proxy 可以解决前端跨域问题，原理是:

上面的参数列表中有一个 changeOrigin 参数, 是一个布尔值, 设置为 true , 本地就会虚拟一个服务器接收你的请求并代你发送该请求