0

I have two applications on two machine.

  1. Backend app using Django (example 123.431.234.123:8080)
  2. Frontend app using Angular (example 123.431.234.124:4200)

Now I am trying to post request from angular

this.http.post<any>('http://123.431.234.123:8080/login/', { username: username, password: password })

I am getting error on browser:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://123.431.234.123:8080/login/. (Reason: CORS header âAccess-Control-Allow-Originâ missing).

When I am trying with curl command on my ubuntu machine, I am able to get the response successfully.

curl -d  '{"username":"admin" ,"password":"carpediem"}' -H "Content-Type: application/json"  http://123.431.234.123:8080/login/

I tried to follow many links and also setup my django setting.py file as

link 1

link 2

and did step by step configuration as below

pip install django-cors-headers Adds to installed apps

INSTALLED_APPS = (

...
'corsheaders',
...

) Add MIDDLEWARE

MIDDLEWARE = [ 

'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...

]

CORS_ORIGIN_ALLOW_ALL=True

After all changes, I am still facing the same issue. It might be duplicate question, But Please help me to solve it.

I am using Mozila firefox, Do I need to do any changes in browser or any other settings?

Vicky
  • 2,008
  • 2
  • 11
  • 19
Sonu Gupta
  • 347
  • 3
  • 16

1 Answers1

0

This is due by the browser security. The browser does not allow access to the IP of your backend by another IP like 127.0.0.1 (localhost)

If you're using Google Chrome, try this extension.

Tolotra Raharison
  • 3,034
  • 1
  • 10
  • 15