Ошибка CORS с фронтендом Angular 13 и бэкендом Django [дубликат]

В настоящее время я работаю над проектом, используя Angular 13 для фронтенда и Django для бэкенда. Я разработал страницу входа в систему, которая получает фоновое изображение через вызов GET API из бэкенда Django. Однако при выполнении запроса я сталкиваюсь с ошибкой CORS (Cross-Origin Resource Sharing).

Вот краткое описание проблемы:

• Frontend: приложение Angular 13
• Backend: приложение Django
• Функция: Страница входа в систему, получающая фоновое изображение через GET-запрос

Выпуск:

Я попытался решить ошибку CORS, добавив заголовок Access-Control-Allow-Origin в ответ бэкенда, но ошибка сохраняется. Я не уверен, следует ли решать эту проблему на стороне фронтенда или на стороне бэкенда.

Взятые шаги:

• Добавили 'Access-Control-Allow-Origin' заголовок в заголовок запроса.
• установил расширение cors в браузере.

Код и изображения:

Я приложил соответствующие фрагменты кода и изображения для лучшего понимания.

login.service.ts

[![enter image description here][1]][1]
import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { environment } from '../environments/environment';
@Injectable({
  providedIn: 'root'
})
export class LoginService {
  rootURL:any;
  constructor(public http:HttpClient) {
    this.rootURL = environment.apiUrl;
  }
  getBackGroundImage(){
    let header = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    }
    return this.http.get(`${this.rootURL}/login/cors/img/backgrounds/login/28.jpg?1907c5373b7`,{headers: header});
  }
}

login.component.ts

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {LoginService} from '../services/login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  loginForm!: FormGroup;
  hasError = false;
  errorMessage = '';
  constructor(public loginService:LoginService) {
    this.loginService.getBackGroundImage().subscribe((response: any) => {
      console.log('response', response);
    },(error:any)=>{
      console.error(error.message);
    })
  }

  ngOnInit(): void {
    this.loginForm = new FormGroup({
      emailFormControl : new FormControl('', [Validators.required, Validators.email]),
      passwordFormControl : new FormControl('', [Validators.required])
    })
  }
  logIn(): any{
    debugger;
      if(this.loginForm.value.emailFormControl == "" || this.loginForm.value.passwordFormControl == ""){
        this.hasError = true;
        this.errorMessage = 'Please, type your login and password in form above';
      }
      else if(this.loginForm.value.emailFormControl !== 'mohit.k.sharma2' && this.loginForm.value.passwordFormControl !== "test"){
        this.hasError = true;
        this.errorMessage = 'Login or password is incorrect';
      }
      else if(this.loginForm.value.emailFormControl == 'mohit.k.sharma2' && this.loginForm.value.passwordFormControl.value == "test"){
        this.errorMessage = '';
        this.hasError = false;
      }
  }
}

Вопросы:

1. Нужна ли какая-то особая конфигурация в Django для корректной работы с CORS?
2. Есть ли дополнительные параметры или заголовки, которые необходимо настроить на фронтенде или бэкенде, чтобы решить эту проблему?
3. Можете ли вы предоставить руководство по отладке и исправлению ошибок CORS в данном контексте?

Спасибо за помощь!

Вернуться на верх