Angular-CLI-proxy naar backend werkt niet

https://github.com/angular/angular-cli#proxy- to-backendhier is een instructie hoe u proxy’s naar backend kunt uitvoeren. Ik heb alles stap voor stap gedaan en nog steeds worden verzoeken niet geproxyd.

8080 – mijn Express-backend
4200 – mijn Angular2-frontend

In Angular2-project heb ik bestand proxy.conf.jsonmet inhoud als deze:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

In Angular2 package.json heb ik de start-procedure gewijzigd in "start": "ng serve --proxy-config proxy.conf.json"

Als ik in commandant npm starttyp, dan zie ik aan het begin Proxy created: /api -> http://localhost:8080. Nou, tot nu toe is het goed denk ik.

Ik probeer een verzoek te verzenden (Angular2)

 constructor(private http: Http) {
    this.getAnswer();
  }
  getAnswer(): any {
    return this.http.get("/api/hello")
      .subscribe(response => {
        console.log(response);
      })
  }

Ik krijg een foutmelding dat http://localhost:4200/api/hello 404 (Not Found). Zoals we kunnen zien, is er niets geproxydeerd. Waarom? Heb ik iets verkeerd gedaan?

Voor alle duidelijkheid. Als ik handmatig naar http://localhost:8080/helloga, werkt alles goed. Er is niets om naar te zoeken aan de achterkant.


Antwoord 1, autoriteit 100%

Kun je deze proberen:

{
  "/api": {
    "target": "http://url.com",
    "secure": false,
    "pathRewrite": {"^/api" : ""}
  }
}

Het werkt voor mij,

** NG Live Development Server is running on http://localhost:4200. **
 10% building modules 3/3 modules 0 active[HPM] Proxy created: /api  ->  http://ec2-xx-xx-xx-xx.ap-south-1.compute.amazonaws.com
[HPM] Proxy rewrite rule created: "^/api" ~> ""

Antwoord 2, autoriteit 33%

Dit werkte bijna voor mij. Moest ook

. toevoegen

"changeOrigin": true,

volledige proxy.conf.json hieronder weergegeven:

{
  "/proxy/*": {
  "target": "https://url.com",
  "secure": false,
  "changeOrigin": true,
  "logLevel": "debug",
  "pathRewrite": {"^/proxy" : ""}
  }
}

Antwoord 3, autoriteit 11%

Ik moest een kleine aanpassing maken op basis van de bovenstaande antwoorden, hoewel het een beetje vreemd lijkt om nu naar de configuratie te kijken.

Dit is mijn proxy.conf.json hieronder weergegeven:

{
  "/api/*": {
     "target": "https://url.com",
     "secure": false,
     "changeOrigin": true,
     "logLevel": "debug",
     "pathRewrite": {"^/api" : "http://url.com/api"}
  }
}

Eigenlijk heb ik het pad volledig herschreven. En het werkt nu.


Antwoord 4, autoriteit 7%

Op MACwerkt dit voor mij

Angular 4 met localhost:http://localhost:4200/

In package.json

"start": "ng serve --proxy-config proxy.config.json",

In proxy.config.json

Waar onze-bedrijf-serverzou worden vervangen door off-site URL

{
  "/v1": {
    "target": "https://our-company-server.com:7002",
    "secure": false,
    "logLevel": "debug"
  }
}

Waar een hoekig GET-verzoek zou zijn…

this.http.get('/v1/dashboard/client', options).map...
// options are headers, params, etc...
// then .map the observable in this case.

Antwoord 5, autoriteit 7%

   Please follow below steps
    1 In Angular project create a file called  **proxy.conf.json** with content like this:
    {
        "/api/*": {
          "target": "http://127.0.0.1:8080",
          "secure": false,
          "logLevel": "debug",
          "changeOrigin": true
        }
      }
    2 edit package.json file and add below code
      "start": "ng serve --proxy-config proxy.conf.json"
    3 call your backend api like this
       this.http.get('/api/v1/people')
      .map(res => res.json());
    4 run npm start or ng serve --proxy-config proxy.conf.json

6

Proxyattribuut PathRewrite moet worden toegevoegd in de proxy.conf.json.
Zie het onderstaande voorbeeld.
{
"/services/*": {
"target": "http://yoururl.com",
"secure": false,
"changeOrigin" : true,
"pathRewrite": {
"^/services" : ""
}
}
}

en voer ng serveren –Proxy-config proxy.conf.json
Het zal zeker werken.


7

Niet echt een antwoord op de vraag, maar zorg ervoor dat uw backend eigenlijk beschikbaar is waar u verwacht dat het is. In mijn geval maakte iets het Node.js Backend Stop met beantwoorden van verzoeken die ik in het begin niet heb opgemerkt en de proxy de schuld heeft gegeven.

Other episodes