How to solve CORS with Django and VueJs?

Question

I have made some settings, but I can't solve it.

Could anyone help?

INSTALLED_APPS = [
   ....

    'rest_framework',
    'corsheaders',
...
]

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

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

Axios

axios.defaults.headers = { 'Accept': 'application/json', 'Content-Type': 'application/json' }

Access to XMLHttpRequest at 'https://api.novosite.com/api/token' from origin 'https://novosite.vip' 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.

score 0 · Answer 1 · answered Aug 16 '20 at 08:31

0

I'm not used to working with django but I do use flask with CORS. Here's a link to another thread which might help : How can I enable CORS on Django REST Framework

answered Aug 16 '20 at 08:31

Sanfer Noronha

26
3

score 0 · Answer 2 · answered Dec 22 '21 at 10:25

I had the same problem. I was using django-cors-headers and followed their instructions to the T.

The cause of my issue was on the client-side. The server URL I used, namely localhost:8000, didn't contain the protocol. When I changed it to http://localhost:8000 it worked.

How to solve CORS with Django and VueJs?

2 Answers2