it-swarm.com.de

Angular-CLI-Proxy an Backend funktioniert nicht

https://github.com/angular/angular-cli#proxy-to-backend Hier finden Sie eine Anleitung, wie Sie das Backend erreichen können. Ich habe alles Schritt für Schritt gemacht und Anfragen werden trotzdem nicht weitergeleitet.

8080 - mein Express-Backend 4200 - mein Angular2-Frontend

Im Angular2-Projekt habe ich eine proxy.cons.json-Datei mit folgendem Inhalt:

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

In Angular2 package.json habe ich start in "start": "ng serve --proxy-config proxy.conf.json" geändert.

Wenn ich in npm start eingebe, kann ich am Anfang Proxy created: /api -> http://localhost:8080 sehen. Nun, soweit gut, schätze ich.

Ich versuche eine Anfrage zu senden (Angular2)

  constructor(private http: Http) {
    this.getAnswer();
  }

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

Ich erhalte die Fehlermeldung http://localhost:4200/api/hello 404 (Not Found). Wie wir sehen können, wurde nichts vertreten. Warum? Habe ich etwas falsch gemacht?

Deutlich sein. Wenn ich manuell zu http://localhost:8080/hello gehe, funktioniert alles gut. Auf der Backend-Seite gibt es nichts zu suchen.

26
elzoy

Könnten Sie es mit diesem versuchen: 

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

Für mich geht das,

** 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" ~> ""
34
Manish

Das war kurz davor, für mich zu arbeiten. Musste auch hinzufügen 

"changeOrigin": true,

full proxy.conf.json unten gezeigt:

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

Ich musste basierend auf den obigen Antworten eine kleine Anpassung vornehmen, obwohl es jetzt ein bisschen seltsam erscheint, die config jetzt zu betrachten.

Dies ist mein Proxy.conf.json unten gezeigt:

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

Grundsätzlich habe ich den Pfad komplett neu geschrieben. Und es funktioniert jetzt.

3

Bei MAC funktioniert das bei mir

Winkel 4 läuft localhost:http: // localhost: 4200/

In package.json

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

In proxy.config.json

Wobei our-company-server durch Off-Site URL ersetzt würde.

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

Wo eine winklige GET -Anfrage wäre ...

this.http.get('/v1/dashboard/client', options).map...

// options are headers, params, etc...
// then .map the observable in this case.
1
SoEzPz

diese Arbeit für mich proxy.config.json-Datei

{
"/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
    }
}

und fügen Sie "ng serve --proxy-config proxy.config.json" in package.json hinzu und führen Sie den Befehl npm start aus

1
Sohail Ahmad

Informationen zu benutzerdefinierten localhost-Domänen finden Sie unter this solution

{
  "/api/*": {
    "target": "http://backend.site.example",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": "http://backend.site.example/api"
    }
  }
}
1
Mahesh
    Please follow below steps

    1 In Angular project create a file called  **proxy.cons.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
0
vipinlalrv