I’m currently working on a project using Angular 13 for the frontend and Django for the backend. I’ve developed a login page that fetches a background image via a GET API call from the Django backend. However, I’m encountering a CORS (Cross-Origin Resource Sharing) error when making the request.

Here’s a summary of the issue:

• Frontend: Angular 13 application
• Backend: Django application
• Feature: Login page fetching background image through a GET request

Issue:

I’ve attempted to resolve the CORS error by adding the Access-Control-Allow-Origin header in the backend response, but the error persists. I’m unsure whether this issue should be resolved on the frontend side or the backend side.

Steps Taken:

• Added ‘Access-Control-Allow-Origin’ header in request header.
• installed cors extension in browser.

Code and Images:

I have attached relevant code snippets and images for better understanding.

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

Questions:

1. Is there a specific configuration needed in Django to handle CORS correctly?
2. Are there additional settings or headers that need to be configured on the frontend or backend to resolve this issue?
3. Can you provide guidance on debugging and fixing CORS errors in this context?

Thank you for your assistance!