web-dev-qa-db-ja.com

webpack-dev-serverプロキシが機能しない

/ 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
     }
   }
 },

しかし、動作しません enter image description here

webpackhttp-proxywebpack-dev-server
16
Arthur Xu

更新：@chimuraiのおかげで、changeOrigin: trueを設定することが重要です。

nderneathwebpack-dev-serverは、すべてのプロキシ設定をhttp-proxy-middlewareに 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
     }
   }
 },
23
Yevgen Safronov

リクエストのURLとポートが、webpack-dev-serverを実行しているものと一致していることを確認してください。したがって、APIがhttp://localhost:5000にあり、開発サーバーがhttp://localhost:8080で実行されている場合は、すべてのリクエストがhttp://localhost:8080に対して行われるようにしてください。 localhost:8080/apiにリクエストを送信し（アプリルートとの競合を回避するため）、パスの書き換えを使用して/ apiを削除するのが最善です。

例：

Webpack devserver proxy config：

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

上で実行されているWebpack開発サーバー：

http://localhost:8080

必要なAPIエンドポイント：

http://localhost:5000/items

アプリで、次のリクエストを行います。

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

これは動作するはずです。上記の問題はすべて、webpack開発サーバーのURLとポートではなくAPIのURLとポートにリクエストを送信し、プロキシとパスの書き換えを使用してリクエストをAPIに送信することに起因しているようです。

2
Jeff Weinberg

これは私にとってはうまくいきます。

    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',
        ...
1
He LI