Żądania proxy na oddzielnym serwerze zaplecza z vue-cli

Question

Używam szablonu vue-cliwebpack-simple do generowania moich projektów, a ja chciałbym prosić o serwer proxy na osobny serwer zaplecza. Jak można to łatwo osiągnąć?

Answer 1

Jeśli używasz webpack szablon z vue-cli, można znaleźć wymagane informacje zawarte w tym dokumencie referencyjnym:

http://vuejs-templates.github.io/webpack/proxy.html

Albo zamiast zmieniać szablon teraz, można skopiować odpowiedni config z szablon webpack do lokalnego szablonu webpack-simple.

EDIT: Więcej informacji z mojej lokalnej konfiguracji

To co mam w config/index.js pod module.exports:

dev: { 
    env: require('./dev.env'), 
    port: 4200, 
    assetsSubDirectory: 'static', 
    assetsPublicPath: '/', 
    proxyTable: { 
     '/api': { 
      target: 'http://localhost:8080', 
      changeOrigin: true 
     }, 
     '/images': { 
      target: 'http://localhost:8080', 
      changeOrigin: true 
     }, 
     // and so on... 

Powyższa konfiguracja przebiega mój vue-cli na porcie 4200, a ja prowadzę serwer na porcie 8080.

EDYCJA: poprawione informacje o CORS po komentarzu nr 4 i nr 5

Uwaga:

• Opcja changeOrigin w dev.proxyTable (w WebPACK config) gwarantuje, że nie trzeba służyć nagłówki Cors na swoich odpowiedziach API serwera.
• Jeśli z jakiegokolwiek powodu postanowisz pominąć changeOrigin, musisz upewnić się, że interfejs API serwera zawiera Access-Control-Allow-Origin: * (lub odpowiednik) w nagłówkach odpowiedzi.

Referencje:

1. https://stackoverflow.com/a/36662307/654825
2. https://github.com/chimurai/http-proxy-middleware