Angular&Django: На запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'
Я учусь разрабатывать сайт с помощью Angular и Django. Я получил эту ошибку от моего Angular localhost:
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/user/' from origin
'http://localhost:4200' has been blocked by CORS policy: Response to preflight request
doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
В django's settings.py я установил пользовательское приложение users, rest_framework и corsheaders. Кроме того, я включил этот конфиг:
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
У меня нет ошибок CORS при запросах на вход и регистрацию из моего приложения angular, но проблема появилась, когда я использовал промежуточное ПО для проверки того, был ли предоставлен jwt-заголовок (и проверки, был ли он действительным или истек срок его действия). Я добавил это промежуточное ПО в файл settings.py, и этот запрос отлично работал в Postman, поэтому я попытался реализовать его в Angular.
Этот метод:
validateToken(): Observable<boolean> {
const url = `${this.baseUrl}/user/`;
const headers = new HttpHeaders().set(
'jwt',
localStorage.getItem('token') || ''
);
return this.http
.get<AuthResponse>(url, {
headers,
})
.pipe(
map((resp) => {
localStorage.setItem('token', resp.jwt);
this._user = resp.user;
return resp.ok;
}),
catchError((err) => of(false))
);
Однако я получаю ошибку, которую показывал ранее. Кто-нибудь из вас уже сталкивался с подобной проблемой с Angular и Django и знает, как ее можно решить?
PS: Я пытался установить 'Allow CORS: Access-Control-Allow-Origin' расширение Chrome, но когда я использовал его, я все еще получал эту ошибку:
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/user/' from origin 'http://localhost:4200'
has been blocked by CORS policy: Response to preflight request doesn't pass access control check:
It does not have HTTP ok status.
В переменной headers нужно установить пару property:value, содержащую недостающее свойство управления доступом:
'Access-Control-Allow-Origin' : '*'