Bootstrap

vue中Webpack-der-server配置proxy实现跨域请求

示例

webpack配置文件

module.exports = {
  //...
  devServer: {
    // ... 其他配置
    proxy: {
      '/api': {
        target: 'http://30.50.20.6:8080/', // 接口域名
        changeOrigin: true, // 域名时需要
        ws: true, // 如果要代理 websockets
        pathRewrite: {
          '^/api': '' // 需要rewrite的,
        }
        secure: false,          // 设置支持https协议的代理
      }
    }
  }
};

参数

1. /api
  • 匹配请求API的标志,如果API中有这个字符串,那么就匹配代理,
2. target
  • 代理的API地址,就是需要跨域的API地址。
  • 如果是域名需要额外添加一个参数changeOrigin: true,否则会代理失败。
3.changeOrigin
  • 可以让target参数时域名
2.3 pathRewrite
  • 路径重写,也就是说会修改最终请求的API路径。
  • 设置pathRewrite: {’^/api’ : ‘’},后,
  • 最终代理访问的路径:http://30.50.20.6:8080/api/…,

官网
更多参数,http-proxy-middleware

;