webentwicklung-frage-antwort-db.com.de

So fügen Sie eine CORS-Anforderung im Header in Angular 5 hinzu

Ich habe das CORS im Header hinzugefügt, aber ich bekomme immer noch das CORS-Problem in meiner Anfrage. Was ist der richtige Weg, um CORS und andere Anforderungen in den Headern hinzuzufügen und zu bearbeiten?

Hier ist der Service-Dateicode:

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
  headers: new HttpHeaders({ 
    'Access-Control-Allow-Origin':'*',
    'Authorization':'authkey',
    'userid':'1'
  })
};

public baseurl = 'http://localhost/XXXXXX';

userAPI(data): Observable<any> {
  return this.http.post(this.baseurl, data, httpOptions)
    .pipe(
      tap((result) => console.log('result-->',result)),
      catchError(this.handleError('error', []))
    );
}

Error:

Antwort auf Preflight-Anforderung besteht keine Zugriffskontrollprüfung: Auf der angeforderten Ressource ist kein Header "Access Control-Allow-Origin" vorhanden. Origin ' http: // localhost: 4200 ' ist daher kein Zugriff gestattet

fehlgeschlagen: HTTP-Fehlerantwort für (unbekannte URL): 0 unbekannter Fehler

In meinem serverseitigen Code habe ich CORS in die Indexdatei eingefügt.

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
35
Aman Kumar

CORS (Cross-Origin Resource Sharing) gibt dem Server die Möglichkeit, zu sagen "Ich akzeptiere Ihre Anfrage, obwohl Sie aus einem anderen Ursprung kamen." Dies erfordert eine Zusammenarbeit mit dem Server. Wenn Sie also den Server nicht ändern können (z. B. wenn Sie eine externe API verwenden), funktioniert dieser Ansatz nicht.

Ändern Sie den Server, um den Header Access-Control-Allow-Origin: * hinzuzufügen, um Cross-Origin-Anforderungen von überall aus zu aktivieren (oder geben Sie statt * eine Domäne an). 

23

Nach meiner Erfahrung funktionierten die Plugins mit HTTP, aber nicht mit dem neuesten httpClient. Auch das Konfigurieren der CORS-Antwortheader auf dem Server war keine Option. Also habe ich eine proxy.conf.json-Datei erstellt, die als Proxy-Server fungiert. 

Lesen Sie mehr dazu hier .

proxy.conf.json datei:

{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

Ich habe die proxy.conf.json-Datei direkt neben der package.json-Datei im selben Verzeichnis abgelegt.

Dann habe ich den Startbefehl in der package.json-Datei geändert:

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

Der HTTP-Aufruf von meiner App-Komponente:

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

Um meine App auszuführen, muss ich npm start oder ng serve --proxy-config proxy.conf.json verwenden.

26
rgantla

Ein POST mit httpClient in Angular 6 führte ebenfalls eine OPTIONS-Anforderung aus:

Header Allgemein:

 Anforderungs-URL: https: //hp-probook/Perl-bin/muziek.pl/=/postData
Request Methode: OPTIONS 
 Statuscode: 200 OK 
 Remote-Adresse: 127.0.0.1: 443 
 Referrer-Richtlinie: Kein Referrer-When-Downgrade 

Mein Perl REST -Server implementiert die Anforderung OPTIONS mit dem Rückkehrcode 200.

Der nächste POST - Request-Header:

 Accept: */* 
 Accept-Encoding: gzip, deflate, br 
 Accept-Language: nl-NL, nl; q = 0,8, en-US; q = 0,6, en; q = 0,4 
 Access-Control-Request-Header: Inhaltstyp 
 Access-Control-Request-Methode: POST 
 Verbindung: Keep-Alive 
 Host: hp-probook 
 Herkunft: http://localhost:4200
Referer:http://localhost:4200/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, wie Gecko) Chrome/59.0.3071.109 Safari/537.36 

Hinweis Access-Control-Request-Header: Inhaltstyp. 

Mein Perl-Skript für das Backend verwendet also folgende Header:

 - "Access-Control-Allow-Origin" => '*', 
 - "Access-Control-Allow-Methods" => 'GET, POST, PATCH, DELETE, PUT, OPTIONS', 
 - "Access-Control-Allow-Headers" => 'Herkunft, Inhaltstyp, X-Auth-Token, Inhaltstyp', 

Mit diesem Setup haben GET und POST für mich funktioniert!

2
Rob Lassche

Der Header sieht für HttpClient in NG5 folgendermaßen aus:

let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'apikey': this.apikey,
        'appkey': this.appkey,
      }),
      params: new HttpParams().set('program_id', this.program_id)
    };

Sie können einen API-Aufruf mit Ihrer localhost-URL tätigen. Das funktioniert für mich.

  • Vergessen Sie niemals Ihre Params-Spalte in der Kopfzeile: Wie Params: new HttpParams ().
2
Damon Wu

bitte importieren Sie Request-Optionen von Winkelkors

    import {RequestOptions, Request, Headers } from '@angular/http';

und fügen Sie in Ihrem Code Anforderungsoptionen hinzu (siehe unten)

    let requestOptions = new RequestOptions({ headers:null, withCredentials: 
    true });

senden Sie die Anfrageoption in Ihrer API-Anfrage

code-Snippet unten-

     let requestOptions = new RequestOptions({ headers:null, 
     withCredentials: true });
     return this.http.get(this.config.baseUrl + 
     this.config.getDropDownListForProject, requestOptions)
     .map(res => 
     {
      if(res != null)
      { 
        return res.json();
        //return true;
      }
    })
  .catch(this.handleError);
   }  

und fügen Sie CORS in Ihrem Backend PHP Code hinzu, wo alle API-Anforderungen zuerst landen.

probieren Sie dies aus und lassen Sie mich wissen, ob es funktioniert oder nicht. Ich hatte das gleiche Problem, bei dem ich CORS hinzugefügt habe, das nicht funktioniert hat 

1
raj yadav

Sie können auch die Funktion fetch und die Funktion no-cors Modus. Ich finde es manchmal einfacher, es zu konfigurieren als Angulars eingebautes http-Modul. Sie können auf der Registerkarte Chrome Dev tools network) mit der rechten Maustaste auf Anforderungen klicken und diese in der Abrufsyntax kopieren, was großartig ist.

import { from } from 'rxjs';

// ...

result = from( // wrap the fetch in a from if you need an rxjs Observable
  fetch(
    this.baseurl,
    {
      body: JSON.stringify(data)
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
      mode: 'no-cors'
    }
  )
);
1
metakermit

Mit jsonp ...

in der Anwendung, die die API aufruft:

import { HttpClient } from "@angular/common/http";

this.httpClient.jsonp("http://127.0.0.1:3001/scicat/Publication", "callback")
...

In der callee:

import { Request, Response } from "express";

// is commonly cross a cross Origin request
export let getPublication = (req: Request, res: Response) => {
  logger.debug("Get publications request.");
  const dao = MongoConnector.getInstance();
  dao
    .getPublication(req.query)
    .then(response => {
      Response.jsonp(response);
    })
    .catch(oaiError => {
      Response.status(500);
      Response.jsonp(oaiError);
    });
};
0
ldgorman

Das folgende arbeitete für mich nach stundenlangem Ausprobieren

      $http.post("http://localhost:8080/yourresource", parameter, {headers: 
      {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }).

Der folgende Code hat jedoch nicht funktioniert, mir ist nicht klar, warum, hoffentlich kann jemand diese Antwort verbessern.

          $http({   method: 'POST', url: "http://localhost:8080/yourresource", 
                    parameter, 
                    headers: {'Content-Type': 'application/json', 
                              'Access-Control-Allow-Origin': '*',
                              'Access-Control-Allow-Methods': 'POST'} 
                })
0
MG Developer