webpack-dev-server 代理：带通配符的上下文

Question

我想将 /v1/* 代理到 http://myserver.com，这是我的脚本

devServer: {
  historyApiFallBack: true,
  // progress: true,
  hot: true,
  inline: true,
  // https: true,
  port: 8081,
  contentBase: path.resolve(__dirname, 'public'),
  proxy: {
    '/v1/*': {
      target: 'http://api.in.uprintf.com',
      secure: false
      // changeOrigin: true
    },
  },
},

但是没用，

Answer 1

更新： 感谢@chimurai，设置changeOrigin: true对于使其工作很重要。

Underneath webpack-dev-server passes all the proxy configuration to http-proxy-middleware, from the documentation。很明显你想要的用例实际上是用 /v1/** 路径实现的：

devServer: {
   historyApiFallBack: true,
   // progress: true,
   hot: true,
   inline: true,
   // https: true,
   port: 8081,
   contentBase: path.resolve(__dirname, 'public'),
   proxy: {
     '/v1/**': {
       target: 'http://api.in.uprintf.com',
       secure: false,
       changeOrigin: true
     }
   }
 },

Answer 2

确保您的请求 url 和端口与您的 webpack-dev-server 运行所在的相匹配。因此，如果您的 api 位于 http://localhost:5000，并且您的开发服务器位于 http://localhost:8080 上的运行，请确保您的所有请求都指向 http://localhost:8080。最好向 localhost:8080/api 发出请求（以避免与应用程序路由冲突）并使用路径重写来删除 /api。

示例：

Webpack devserver 代理配置：

proxy: {
    '/api': {
        target: 'http://localhost:5000',
        pathRewrite: { '^/api': '' },
    },
}

Webpack 开发服务器运行在：

http://localhost:8080

所需的API端点：

http://localhost:5000/items

在您的应用中，将请求发送至：

http://localhost:8080/api/items.

这个应该有效。在我看来，上述所有问题都源于向 API url 和端口发出请求，而不是向 webpack 开发服务器 url 和端口发出请求，并使用代理和路径重写为将请求定向到 API.

Answer 3

这对我来说很好。

    devServer: {
        host: '11.11.111.111',          //local ip
        port: 8080,
        contentBase: outputpath,
        historyApiFallback: true,
        inline: true,
        proxy: {
          '/api':{
                target:'http://example.com',
                pathRewrite: {'^/api' : ''},
                secure:false,
                changeOrigin:true
          }
        }
    },

//使用

    $.ajax({
        url:'/api/pvp/share/getsharecfg.php',
        dataType:'json',
        ...

webpack-dev-server 代理：带通配符的上下文

webpack-dev-server proxy: context with wildcard

http-proxy

webpack

webpack-dev-server