3

Im working on a DRF (Django project) where my backend django rest api is hosted on a server and my ReactJS frontend is also hosted on the same server. I had made sure to follow all the steps needed as what I've read in the ff documentations:

I have added corsheaders INSTALLED_APPS and my middleware in settings.py is:

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

And my CORS Settings in settings.py is:

CORS_ALLOW_ALL_ORIGINS=False

CSRF_TRUSTED_ORIGINS = [
    "https://samplefrontend.tech",
]

CORS_ALLOW_METHODS = [
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
]

CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]

However, when I try to do some requests using Postman from my local PC (not from the frontend server), example, get token, the rest api returns the refresh and access tokens. This also holds true with other HTTP requests, I can freely perform these requests using postman and get a response.

What I needed is that only requests coming from the frontend app (reactjs) should be accepted. Can anyone help me on this?

abkdTECH
  • 31
  • 2
  • 8
  • Try adding this: ALLOWED_HOSTS=['*'] 2 CORS_ORIGIN_ALLOW_ALL = True – Kovy Jacob Apr 18 '22 at 13:33
  • @KovyJacob, no.. it does more harm than good.. all I wanted is to prevent unwanted usage on my django api by preventing other accesses. Only my react frontend should be able to access my django api.. what you suggested allows everyone to access the api.. – abkdTECH Apr 18 '22 at 13:35
  • Try this: ALLOWED_HOSTS=['http://localhost:5000'] CORS_ORIGIN_ALLOW_ALL = False CORS_ORIGIN_WHITELIST = ( 'http://localhost:5000', ) – Kovy Jacob Apr 18 '22 at 13:37
  • replacing allowed host and whitelist with whatever you want – Kovy Jacob Apr 18 '22 at 13:38
  • no, it doesnt work, unfortunately.. and this is what confuses me. – abkdTECH Apr 18 '22 at 16:31

1 Answers1

0

The documentation says to put cors middleware at the very top of the list.

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
     ---
     all other middleware
]

I have my cors setting as -

CORS_ORIGIN_WHITELIST = [
    "http://localhost:3000",
    "http://localhost:5000",
    "http://192.168.3.27:3000"
]

and this works fine.

Ranu Vijay
  • 1,137
  • 9
  • 18
  • Ive done the same thing actually and still no avail.. – abkdTECH Apr 19 '22 at 15:16
  • Put cors above security and session middleware, just to check. – Ranu Vijay Apr 19 '22 at 15:58
  • Try running your react on port 3001 and check whether it blocks or not. Your allow origin settings may be [*], change that to allow only simplefrontend.tech, may be postman doesn't have url. So it is allowing. Verify your setting for allow origin and not cors. – Ranu Vijay Apr 19 '22 at 16:02
  • well, I am actually looking for a solution that blocks everything except whatever is whitelisted.. so if request is coming from postman, curl or any other apps, those things should also be blocked. – abkdTECH Apr 20 '22 at 12:51
  • cors aren't meant for this functionality. you will have to block the hostname trying to access your django. [you can check this](https://stackoverflow.com/a/59210057/7032967) – Ranu Vijay Apr 21 '22 at 09:15
  • I have tried adding this condition but unfortunately, it blocks everything now. Not sure why.. Actually, here's my setup, my backend rest api and frontend resides on same server. Backend rest api is being served via my nginx reverse proxy and my frontend application has a domain name that points to my frontend application that runs on this same server. I created another ticket for this: https://stackoverflow.com/questions/71986743/using-nginx-reverse-proxy-how-do-you-block-all-request-except-if-request-comes – abkdTECH Apr 24 '22 at 08:38