Mit dem angular-cli ng servelokalen Entwicklungsserver werden alle statischen Dateien aus meinem Projektverzeichnis bereitgestellt.

Wie kann ich meine AJAX-Aufrufe an einen anderen Server weiterleiten?

UPDATE 2017

Jetzt ist eine bessere Dokumentation verfügbar, und Sie können sowohl JSON- als auch JavaScript-basierte Konfigurationen verwenden: Angular-CLI-Dokumentations-Proxy

Beispiel für eine https-Proxy-Konfiguration

{
  "/angular": {
     "target":  {
       "host": "github.com",
       "protocol": "https:",
       "port": 443
     },
     "secure": false,
     "changeOrigin": true,
     "logLevel": "info"
  }
}

Meines Wissens wird das Einrichten von Proxys mit der .ember-cli-Datei mit Angular 2.0 nicht empfohlen. offizieller Weg ist wie unten

1. Bearbeiten Sie "start"Ihre package.json, um unten zu schauen

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

2. Erstellen Sie eine neue Datei, die proxy.conf.jsonim Stammverzeichnis des Projekts aufgerufen wird, und definieren Sie darin Ihre Proxys wie unten beschrieben

   {
     "/api": {
       "target": "http://api.yourdomai.com",
       "secure": false
     }
   }
   

3. Wichtig ist, dass Sie npm startanstelle von verwendenng serve

Lesen Sie hier mehr: Proxy Setup Angular 2 cli

Ich werde im folgenden Beispiel erklären, was Sie wissen müssen :

{
  "/folder/sub-folder/*": {
    "target": "http://localhost:1100",
    "secure": false,
    "pathRewrite": {
      "^/folder/sub-folder/": "/new-folder/"
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

1. / folder / sub-folder / * : Pfad sagt: Wenn ich diesen Pfad in meiner eckigen Anwendung sehe (der Pfad kann überall gespeichert werden), möchte ich etwas damit tun. Das Zeichen * gibt an, dass alles, was auf den Unterordner folgt, enthalten ist. Wenn Sie beispielsweise mehrere Schriftarten in / folder / sub-folder / haben , nimmt das * alle auf

2. "target" : " http: // localhost: 1100 " für den obigen Pfad machen die Ziel- URL zum Host / zur Quelle, daher haben wir im Hintergrund http: // localhost: 1100 / folder / sub-folder /

3. "pathRewrite ": {"^ / folder / sub-folder /": "/ new-folder /"}, Angenommen , Sie möchten Ihre Anwendung lokal testen, http: // localhost: 1100 / folder / sub- Ordner / enthält möglicherweise einen ungültigen Pfad: / Ordner / Unterordner /. Sie möchten diesen Pfad in einen korrekten Pfad ändern, der http: // localhost: 1100 / new- folder / lautet. Daher wird pathRewrite sehr nützlich. Der Pfad in der Anwendung wird ausgeschlossen (linke Seite) und der neu geschriebene Pfad (rechte Seite).

4. "sicher" : Gibt an, ob wir http oder https verwenden. Wenn im Zielattribut https verwendet wird, setzen Sie das sichere Attribut auf true, andernfalls auf false

5. "changeOrigin" : Option ist nur erforderlich, wenn Ihr Host-Ziel nicht die aktuelle Umgebung ist, zum Beispiel: localhost. Wenn Sie den Host in www.something.com ändern möchten, das das Ziel im Proxy wäre, setzen Sie das Attribut changeOrigin auf "true":

6. "logLevel" : Das Attribut gibt an, ob der Entwickler das Proxy auf seinem Terminal / cmd ausgeben möchte. Daher würde er den im Bild gezeigten Wert "debug" verwenden

Im Allgemeinen hilft der Proxy bei der lokalen Entwicklung der Anwendung. Sie legen Ihre Dateipfade für Produktionszwecke fest. Wenn Sie alle diese Dateien lokal in Ihrem Projekt haben, können Sie einfach Proxy verwenden, um darauf zuzugreifen, ohne den Pfad in Ihrer App dynamisch zu ändern.

Wenn es funktioniert, sollten Sie so etwas in Ihrem cmd / Terminal sehen.

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

"changeOrigin": true,
"pathRewrite": {"^/proxy" : ""}

Vollständig proxy.conf.jsonunten gezeigt:

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

BEARBEITEN: DIESES FUNKTIONIERT NICHT MEHR IN CURRENT ANGULAR-CLI

Eine aktuelle Lösung finden Sie in der Antwort von @imal hasaranga perera

Der Server angular-clikommt aus dem ember-cliProjekt. Erstellen Sie zum Konfigurieren des Servers eine .ember-cliDatei im Projektstamm. Fügen Sie dort Ihre JSON-Konfiguration hinzu:

{
   "proxy": "https://api.example.com"
}

Starten Sie den Server neu und er wird dort alle Anforderungen als Proxy verwenden.

Zum Beispiel mache ich relative Anfragen in meinem Code an /v1/foo/123, der bei abgeholt wird https://api.example.com/v1/foo/123.

Sie können beim Starten des Servers auch ein Flag verwenden: ng serve --proxy https://api.example.com

Aktuell für Angular-Cli-Version: 1.0.0-Beta.0

Hier ist eine andere Art des Proxys, wenn Sie mehr Flexibilität benötigen:

Sie können die Option 'Router' und etwas Javascript-Code verwenden, um die Ziel-URL dynamisch neu zu schreiben. Dazu müssen Sie eine Javascript-Datei anstelle einer JSON-Datei als Parameter --proxy-conf in Ihrer Skriptparameterliste 'start' angeben:

"start": "ng serve --proxy-config proxy.conf.js --base-href /"

Wie oben gezeigt, muss der Parameter --base-href auch auf / gesetzt werden, wenn Sie andernfalls <base href = "..."> auf einen Pfad in Ihrer index.html setzen. Diese Einstellung überschreibt dies und es muss sichergestellt werden, dass die URLs in den http-Anforderungen korrekt erstellt werden.

Dann benötigen Sie den folgenden oder einen ähnlichen Inhalt in Ihrer proxy.conf.js (nicht json!):

const PROXY_CONFIG = {
    "/api/*": {
        target: https://www.mydefaulturl.com,
        router: function (req) {
            var target = 'https://www.myrewrittenurl.com'; // or some custom code
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

Beachten Sie, dass die Router-Option auf zwei Arten verwendet werden kann. Zum einen weisen Sie ein Objekt zu, das Schlüsselwertpaare enthält, wobei der Schlüssel der angeforderte Host / Pfad ist und der Wert die neu geschriebene Ziel-URL ist. Der andere Weg ist, wenn Sie eine Funktion mit einem benutzerdefinierten Code zuweisen, was ich in meinen Beispielen hier demonstriere. Im letzteren Fall stellte ich fest, dass die Zieloption noch auf etwas gesetzt werden muss, damit die Router-Option funktioniert. Wenn Sie der Router-Option eine benutzerdefinierte Funktion zuweisen, wird die Zieloption nicht verwendet, sodass sie einfach auf true gesetzt werden kann. Andernfalls muss es die Standardziel-URL sein.

Webpack verwendet http-proxy-middleware, daher finden Sie dort nützliche Dokumentation: https://github.com/chimurai/http-proxy-middleware/blob/master/README.md#http-proxy-middleware-options

Im folgenden Beispiel wird der Entwicklername aus einem Cookie abgerufen, um die Ziel-URL mithilfe einer benutzerdefinierten Funktion als Router zu ermitteln:

const PROXY_CONFIG = {
    "/api/*": {
        target: true,
        router: function (req) {
            var devName = '';
            var rc = req.headers.cookie;
            rc && rc.split(';').forEach(function( cookie ) {
                var parts = cookie.split('=');
                if(parts.shift().trim() == 'dev') {
                    devName = decodeURI(parts.join('='));
                }
            });
            var target = 'https://www.'+ (devName ? devName + '.' : '' ) +'mycompany.com'; 
            //console.log(target);
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

(Das Cookie wird für localhost und Pfad '/' gesetzt und läuft über ein Browser-Plugin lange ab. Wenn das Cookie nicht vorhanden ist, verweist die URL auf die Live-Site.)

Die Proxy-Dokumentation für Angular-CLI finden Sie hier:

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Bearbeiten Sie nach dem Einrichten einer Datei mit dem Namen proxy.conf.json in Ihrem Stammordner Ihre package.json, um die Proxy-Konfiguration beim Start einzuschließen. Führen Sie nach dem Hinzufügen von "start": "ng serve --proxy-config proxy.conf.json" zu Ihren Skripten npm start und nicht ng serve aus, da dadurch das Flag-Setup in Ihrer package.json ignoriert wird.

aktuelle Version von angle-cli: 1.1.0

Es ist wichtig zu beachten, dass der Proxy-Pfad an alles angehängt wird , was Sie als Ziel konfiguriert haben. Also eine Konfiguration wie diese:

{
  "/api": {
    "target": "http://myhost.com/api,
    ...
  }
}

und eine Anfrage wie http://localhost:4200/apiführt zu einem Anruf bei http://myhost.com/api/api. Ich denke, die Absicht hier ist, nicht zwei verschiedene Wege zwischen Entwicklungs- und Produktionsumgebung zu haben. Alles was Sie tun müssen, ist zu verwenden/api Ihre Basis-URL verwenden.

Der richtige Weg wäre also, einfach den Teil zu verwenden, der vor dem API-Pfad steht, in diesem Fall nur die Host-Adresse:

{
  "/api": {
    "target": "http://myhost.com",
    ...
  }
}

Für den Fall, dass jemand nach mehreren Kontexteinträgen für dasselbe Ziel oder dieselbe TypeScript-basierte Konfiguration sucht.

proxy.conf.ts

const proxyConfig = [
  {
    context: ['/api/v1', '/api/v2],
    target: 'https://example.com',
    secure: true,
    changeOrigin: true
  },
  {
    context: ['**'], // Rest of other API call
    target: 'http://somethingelse.com',
    secure: false,
    changeOrigin: true
  }
];

module.exports = proxyConfig;

ng dienen --proxy-config =. / proxy.conf.ts -o

Hier ist ein weiteres Arbeitsbeispiel (@ angle / cli 1.0.4):

proxy.conf.json:

{
  "/api/*" : {
    "target": "http://localhost:8181",
    "secure": false,
    "logLevel": "debug"
  },
  "/login.html" : {
    "target": "http://localhost:8181/login.html",
    "secure": false,
    "logLevel": "debug"
  }
}

laufen mit:

ng serve --proxy-config proxy.conf.json

Screenshot zum Thema Cors-Origin

Cors Problem wurde in meiner Bewerbung konfrontiert. siehe obigen Screenshot. Nach dem Hinzufügen der Proxy-Konfiguration wurde das Problem behoben. Meine Anwendungs-URL: localhost: 4200 und die API-URL anfordern: " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

API-Seite No-Cors-Erlaubnis erlaubt. Außerdem kann ich das cors-Problem auf der Serverseite nicht ändern und musste es nur auf der Winkelseite (Client-Seite) ändern.

Zu lösende Schritte:

1. Erstellen Sie die Datei proxy.conf.json im Ordner src.

   {
      "/maps/*": {
        "target": "http://www.datasciencetoolkit.org",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
      }
    }

2. In API-Anfrage

this.http
      .get<GeoCode>('maps/api/geocode/json?sensor=false&address=' + cityName)
      .pipe(
        tap(cityResponse => this.responseCache.set(cityName, cityResponse))
      );

Hinweis: Wir haben die URL des Hostnamens in der API-Anfrage übersprungen. Diese wird automatisch hinzugefügt, während die Anfrage gestellt wird. Wenn wir proxy.conf.js ändern, müssen wir ng-serve neu starten, dann werden nur die Änderungen aktualisiert.

3. Proxy in angular.json konfigurieren

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "TestProject:build",
            "proxyConfig": "src/proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "TestProject:build:production"
            }
          }
        },

Nachdem Sie diesen Schritt abgeschlossen haben, starten Sie ng-serve Proxy neu

> WARNING in
> D:\angular\Divya_Actian_Assignment\src\environments\environment.prod.ts
> is part of the TypeScript compilation but it's unused. Add only entry
> points to the 'files' or 'include' properties in your tsconfig.
> ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** : Compiled
> successfully. [HPM] GET
> /maps/api/geocode/json?sensor=false&address=chennai ->
> http://www.datasciencetoolkit.org

Schritt 1: Gehen Sie zu Ihrem Stammordner. Erstellen Sie proxy.conf.json

{
  "/auth/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

Schritt 2: Gehen Sie zu package.json und suchen Sie "scripts" unter "start".

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

Schritt 3: Fügen Sie nun / auth / zu Ihrem http hinzu

 return this.http
      .post('/auth/register/', { "username": 'simolee12', "email": '[email protected]', "password": 'Anything@Anything' });
  }

Schritt 4: Letzter Schritt im Terminal läuft npm start

1. Fügen Sie in proxy.conf.json hinzu

   { "/api": { "target": "http://targetIP:9080", "secure": false, "pathRewrite": {"^/proxy" : ""}, "changeOrigin": true, "logLevel": "debug" } }

   2. in package.json machen "start": "ng serve --proxy-config proxy.conf.json"

   3. im Code let url = "/ api / clnsIt / dev / 78"; Diese URL wird in http: // targetIP: 9080 / api / clnsIt / dev / 78 übersetzt