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');
Odpowiedzi:
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.json
plik, który ma działać jako serwer proxy.Przeczytaj więcej na ten temat tutaj .
proxy.conf.json
plik:Umieściłem
proxy.conf.json
plik tuż obokpackage.json
pliku w tym samym katalogu.Następnie zmodyfikowałem polecenie start w pliku package.json:
Wywołanie HTTP z mojego komponentu aplikacji:
Na koniec, aby uruchomić moją aplikację, musiałbym użyć
npm start
lubng serve --proxy-config proxy.conf.json
źródło
target
jak w pliku proxy.config?HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:4200/", ok: false, …} error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) message: "Unexpected token < in JSON at position 0" "
Możesz także wypróbować
fetch
funkcję ino-cors
tryb. 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.źródło
no-cors
blokuje to. Blokuje również ustawianie typu zawartości naapplication/json
.Access to XMLHttpRequest at '..' from origin '..' has been blocked by CORS policy: Request header field x-timezone is not allowed by Access-Control-Allow-Headers in preflight response.
nie można zastąpić,Access-Control-Request-Headers: cache-control,x-timezone
który został dodany domyślnie :( i Github ma to w odpowiedziAccess-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, Accept-Encoding, X-GitHub-OTP, X-Requested-With, User-Agent
pobieranie zadziałałohttpclient
z przechwytujących długi czas do tyłu :)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
Po prostu zasubskrybuj jak zwykle.
źródło
Spraw, aby nagłówek wyglądał następująco dla HttpClient w NG5:
Będziesz mógł nawiązywać połączenia API z adresem URL swojego lokalnego hosta, to działa dla mnie.
źródło
POST z httpClient w Angular 6 również wykonywał żądanie OPTIONS:
Nagłówki Ogólne:
Mój serwer Perl REST implementuje żądanie OPTIONS z kodem powrotu 200.
Następny nagłówek żądania POST:
Uwaga Access-Control-Request-Headers: content-type.
Tak więc mój skrypt backend w Perlu używa następujących nagłówków:
W tej konfiguracji GET i POST działały dla mnie!
źródło
proszę zaimportować requestoptions z kątowych cors
i dodaj opcje żądania w swoim kodzie, jak podano poniżej
opcja wysyłania żądania w żądaniu interfejsu API
fragment kodu poniżej
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
źródło
Poniższe zadziałały dla mnie po godzinach prób
Jednak poniższy kod nie zadziałał, nie wiem dlaczego, mam nadzieję, że ktoś może poprawić tę odpowiedź.
źródło