Kontrola dostępu Pozwól na problem pochodzenia w Angular 2

Question

Mam problem z pobieraniem danych z mojego serwera node.js.

po stronie klienta jest:

public getTestLines() : Observable<TestLine[]> { 
    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.get('http://localhost:3003/get_testlines', options) 
       .map((res:Response) => res.json()) 
       .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
} 

na stronie serwera również ustawić nagłówki:

resp.setHeader('Access-Control-Allow-Origin','*') 
resp.send(JSON.stringify(results)) 

Ale pojawia się błąd

„XMLHttpRequest nie może załadować http://localhost:3003/get_testlines . Odpowiedź na żądanie kontroli wstępnej nie przechodzi kontroli dostępu: nie nagłówek "Access-Control-Allow-Origin" jest obecny na żądanym zasobie . Pochodzenie „http://localhost:3000” nie jest zatem dozwolone dostępu „.

Jak mogę to naprawić? Kiedy usunąć nagłówki mówi, że wymagana jest ten nagłówek.

Answer 1

Access-Control-Allow-Origin jest odpowiedź nagłówek, a nie nagłówek żądania

Musisz umieścić go na odpowiedzi, a nie na żądaniu.

Próbowano umieścić go na odpowiedzi:

resp.setHeader('Access-Control-Allow-Origin','*') 

... ale to nie działało.

Jest tak prawdopodobnie dlatego, że nie umieściłeś go w odpowiedzi na właściwe żądanie. Komunikat o błędzie mówi:

Response to inspekcji wstępnej prośba nie przechodzi Check Control dostęp

zrobiliście coś aby wniosek preflighted. Oznacza to, że zanim przeglądarka wyśle ​​żądanie GET, które próbujesz wykonać, wysyła żądanie OPTIONS.

Prawdopodobnie jest obsługiwany przez inny kod na serwerze, aby linia resp.setHeader('Access-Control-Allow-Origin','*') nie została trafiona.

Jedną z rzeczy, które powodują, że żądanie z preflightem jest tworzone, jest dodanie nagłówków żądań (innych niż niewielka liczba wyjątków). Dodanie Access-Control-Allow-Origin dożądania uruchomi preflightowane żądanie, więc pierwszą rzeczą, którą należy zrobić, aby rozwiązać problem, jest usunięcie Access-Control-Allow-Origin z żądania.

Jeśli to się nie powiedzie, musisz skonfigurować swój serwer, aby mógł odpowiedzieć na żądanie OPTIONS, a także żądanie GET.

Answer 2

Nie ustawiaj Access-Control-Allow-Origin na życzenie, nigdy nie jest tam potrzebna. należy dokładnie sprawdzić czy nagłówek jest obecny na odpowiedź (sprawdzić w konsoli programisty). byłoby pomocne, jeśli wspólna więcej kodu backend.

Answer 3

Access-Control-Allow-Origin jest nagłówek odpowiedź, a nie nagłówek prośba trzeba naprawić uprawnienia w backend. więc musisz utworzyć plik cors.js, który zawiera wszystkie niezbędne uprawnienia.

function crosPermission(){ 
    this.permission=function(req,res,next){ 
    res.header('Access-Control-Allow-Origin','*'); 
    res.header('Access-Control-Allow-Headers','Content-Type'); 
    res.header('Access-Control-Allow-Methods','GET','POST','PUT','DELETE','OPTIONS'); 
    next(); 
    } 
} 

module.exports= new crosPermission(); 

następny krok Trzeba dodać wiersz w swoim app.js

var cors=require('./cors'); 
    app.use(cors.permission) 

Answer 4

Jeśli to będzie reszta API =>http://localhost:3003/get_testlines

następnie użyć @CrossOrigin (origins = "*") aby rozwiązać problem z domeną domenową

Answer 5

Możesz ustawić w nagłówku php jako,

header("Access-Control-Allow-Origin: *"); 
header("Content-Type: application/json; charset=UTF-8");