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将所有代理配置从documentation传递到http-proxy-middleware。很明显，您想要的用例实际上是通过/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

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

示例：

Webpack devserver代理配置：

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

运行的Webpack dev服务器：

http://localhost:8080

所需的API端点：

http://localhost:5000/items

在您的应用中，请求：

http://localhost:8080/api/items。

此应该有效。在我看来，上述所有问题都源于向API url和端口发出请求而不是webpack dev服务器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代理不起作用

3 个答案: