angular - Ingen 'Access-Control-Allow-Origin'-header finns på den begärda resursen - ionic 2-applikation

Jag får följande felmeddelande när jag försöker komma åt min lokala server med en POST-förfrågan:

XMLHttpRequest kan inte ladda http://127.0.0.1:8000/api/v1/users/login. Ingen 'Access-Control-Allow-Origin'-header finns på den begärda resursen. Ursprung 'http://localhost:8100' tillåts därför inte åtkomst.

Min server tillåter CORS eftersom jag har testat det genom att skicka förfrågan med Postman och det fungerar.

Här är min kod i front-end:

private headers = new Headers({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
    'Access-Control-Allow-Headers': 'X-Requested-With,content-type',
    'Access-Control-Allow-Credentials': true 
});


postLogin(data) {
    console.log(data);
    return new Promise((resolve) => {
        this.http.post(this.api + "users/login", data, {headers: this.headers})
            .map(res => res.json())
            .subscribe(answer => {
                 this.loggedIn = true;
                 this.token = answer.token;
                 resolve(answer);
            });
    });
 }

PS: Jag fick inte detta fel med en GET-förfrågan.

Jag försökte sätta en proxy och det ändrar ingenting :(

Detta är min ionic.config.json:

{
  "name": "hardShop",
  "app_id": "",
  "v2": true,
  "typescript": true,
  "proxies": [
      {
          "path": "/api",
          "proxyUrl": "http://127.0.0.1:8000"
      }
  ]
}

Svar #1

Försök igen med att använda detta tillägg i din webbläsare.

Det tillåter dig att göra ajax-förfrågningar till vilken adress som helst från vilken källa som helst, och kringgå http/https-säkerhetskrav eller andra begränsningar som sätts av webbläsare (kända som CORS). Praktiskt taget injicerar det 'Access-Control-Allow-Origin': '*'-huvudet i det mottagna svaret innan det skickas vidare till din app som körs i webbläsaren.

Kom ihåg att detta är en tillfällig lösning, främst för utveckling. Din servers svar måste faktiskt ha 'Access-Control-Allow-Origin': '*'-huvudet, helst med ett mer specifikt värde än *.

Det du gör nu har praktiskt taget ingen effekt, eftersom du som klient skickar en förfrågan med den headern till servern, som sedan omedelbart ignorerar den. Det som spelar roll är att servern har denna header i sitt svar till din klient.

Postman tillämpar inte CORS vad jag vet, så kanske det är därför det inte påverkas.

Relaterade artiklar