2016-04-16 14 views
6

ich Proxy wollen/v1/* zu http://myserver.com, und hier ist mein Skriptwebpack-dev-Server-Proxy dosen't Arbeit

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

, aber es funktioniert nicht, enter image description here

+0

Wo müssen Sie die Konfiguration ablegen? – zehelvion

Antwort

10

Update: dank @chimurai, Einstellung changeOrigin: true ist wichtig, es funktioniert.

Underneathwebpack-dev-server übergibt alle Proxy-Konfiguration an http-proxy-middleware, von der documentation. Es ist klar, dass die Verwendung Fall, dass Sie wirklich wollen, mit /v1/** Pfad erreicht:

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 
    } 
    } 
}, 
+1

Danke für deine Antwort, aber es funktioniert auch nicht. –

+5

Sollte mit der Proxy-Option arbeiten: 'changeOrigin: true' – chimurai

+0

' changeOrigin: true/false, Standard: false - ändert den Ursprung des Host-Headers auf die Ziel-URL' Ja, es hat funktioniert. Danke für deine Antwort! –

1

Stellen Sie sicher, dass Ihre URL und Port, dass Spiele, die Ihre webpack-dev-Server ausgeführt wird. Wenn sich Ihre API unter http://localhost:5000 befindet und Ihr Dev-Server unter http://localhost:8080 ausgeführt wird, stellen Sie sicher, dass alle Ihre Anforderungen an http://localhost:8080 lauten. Am besten stellen Sie Ihre Anfragen an localhost:8080/api (um Konflikte mit App-Routen zu vermeiden) und verwenden Sie den Pfad umschreiben, um die/api zu entfernen.

Beispiel:

Webpack devserver Proxy config:

Webpack dev-Server läuft auf:

http://localhost:8080 

Wunsch API Endpunkt:

http://localhost:5000/items 

Stellen Sie in Ihrer App die Anfrage an:

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

Diese sollte funktionieren. Es scheint mir, dass alle oben genannten Probleme davon herrühren, dass die Anfrage an die API-URL und den Port statt an die URL und den Port des Webpack-Dev-Servers gerichtet wird und die Proxy- und Pfadumschreibung verwendet wird, um die Anfrage an die API zu richten.