Jak dodać żądanie CORS w nagłówku w Angular 5

Dodałem CORS w nagłówku, ale nadal otrzymuję problem z CORS w moim żądaniu. Jaki jest prawidłowy sposób dodawania i obsługi CORS i innych żądań w nagłówkach?

Oto kod pliku usługi:

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', []))
    );
}

Błąd:

Odpowiedź na żądanie inspekcji wstępnej nie przechodzi kontroli dostępu: w żądanym zasobie nie ma nagłówka „Access-Control-Allow-Origin”. Dlatego źródło „ http: // localhost: 4200 ” nie ma dostępu

nie powiodło się: odpowiedź błędu HTTP dla (nieznany adres URL): 0 nieznany błąd

W moim kodzie po stronie serwera dodałem CORS w pliku indeksu.

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');

Z mojego doświadczenia wynika, że ​​wtyczki działały z HTTP, ale nie z najnowszym httpClient. Ponadto skonfigurowanie nagłówków odpowiedzi CORS na serwerze nie było tak naprawdę opcją. Utworzyłem więc proxy.conf.jsonplik, który ma działać jako serwer proxy.

Przeczytaj więcej na ten temat tutaj .

proxy.conf.json plik:

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

Umieściłem proxy.conf.jsonplik tuż obokpackage.json pliku w tym samym katalogu.

Następnie zmodyfikowałem polecenie start w pliku package.json:

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

Wywołanie HTTP z mojego komponentu aplikacji:

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

Na koniec, aby uruchomić moją aplikację, musiałbym użyć npm startlubng serve --proxy-config proxy.conf.json

Możesz także wypróbować fetchfunkcję i no-corstryb. Czasami jest to łatwiejsze do skonfigurowania niż wbudowany w Angular moduł http. Możesz kliknąć prawym przyciskiem myszy żądania na karcie sieciowej narzędzi deweloperskich Chrome i skopiować je w składni pobierania, co jest świetne.

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'
    }
  )
);

Jeśli jesteś podobny do mnie i korzystasz z lokalnego serwera SMS Gateway i wykonujesz żądanie GET na adres IP taki jak 192.168.0.xx, na pewno otrzymasz błąd CORS.

Niestety nie mogłem znaleźć rozwiązania Angulara, ale z pomocą poprzedniej powtórki dostałem swoje rozwiązanie i zamieszczam zaktualizowaną wersję dla Angular 7 8 9

import {from} from 'rxjs';

getData(): Observable<any> {
    return from(
      fetch(
        'http://xxxxx', // the url you are trying to access
        {
          headers: {
            'Content-Type': 'application/json',
          },
          method: 'GET', // GET, POST, PUT, DELETE
          mode: 'no-cors' // the most important option
        }
      ));
  }

Po prostu zasubskrybuj jak zwykle.

Spraw, aby nagłówek wyglądał następująco dla HttpClient w NG5:

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

Będziesz mógł nawiązywać połączenia API z adresem URL swojego lokalnego hosta, to działa dla mnie.

• Nigdy nie zapomnij kolumny parametrów w nagłówku: na przykład params: new HttpParams (). Set ('program_id', this.program_id)

POST z httpClient w Angular 6 również wykonywał żądanie OPTIONS:

Nagłówki Ogólne:

URL żądania: https: //hp-probook/perl-bin/muziek.pl/=/postData
Metoda żądania: OPCJE
Kod stanu: 200 OK
Adres zdalny: 127.0.0.1: 443
Polityka odsyłająca: no-referrer-when-downgrade

Mój serwer Perl REST implementuje żądanie OPTIONS z kodem powrotu 200.

Następny nagłówek żądania POST:

Zaakceptować:*/*
Zaakceptuj kodowanie: gzip, deflate, br
Accept-Language: nl-NL, nl; q = 0,8, en-US; q = 0,6, en; q = 0,4
Access-Control-Request-Headers: typ zawartości
Metoda-żądania-kontroli-dostępu: POST
Połączenie: utrzymuj przy życiu
Host: hp-probook
Pochodzenie: http: // localhost: 4200
Referer: http: // localhost: 4200 /
User-Agent: Mozilla / 5.0 (X11; Linux x86_64) AppleWebKit / 537.36 (KHTML, jak Gecko) Chrome / 59.0.3071.109 Safari / 537.36

Uwaga Access-Control-Request-Headers: content-type.

Tak więc mój skrypt backend w Perlu używa następujących nagłówków:

 - "Access-Control-Allow-Origin" => '*',
 - "Access-Control-Allow-Methods" => 'GET, POST, PATCH, DELETE, PUT, OPTIONS',
 - "Access-Control-Allow-Headers" => 'Origin, Content-Type, X-Auth-Token, content-type',

W tej konfiguracji GET i POST działały dla mnie!

proszę zaimportować requestoptions z kątowych cors

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

i dodaj opcje żądania w swoim kodzie, jak podano poniżej

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

opcja wysyłania żądania w żądaniu interfejsu API

fragment kodu poniżej

     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);
   }  

i dodaj CORS w kodzie PHP zaplecza, w którym wszystkie żądania API będą trafiać jako pierwsze.

spróbuj tego i daj mi znać, czy działa, czy nie. miałem ten sam problem. Dodawałem CORS z angular5, który nie działał, a następnie dodałem CORS do zaplecza i zadziałało dla mnie

Poniższe zadziałały dla mnie po godzinach prób

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

Jednak poniższy kod nie zadziałał, nie wiem dlaczego, mam nadzieję, że ktoś może poprawić tę odpowiedź.

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