[Vuejs]-Django Rest CORS with Vue JS

by

0👍

In doc write

CORS_ALLOW_ALL_ORIGINS: bool

If True, all origins will be allowed. Other settings restricting allowed origins will be ignored. Defaults to False.

Setting this to True can be dangerous, as it allows any website to make cross-origin requests to yours. Generally you’ll want to restrict the list of allowed origins with CORS_ALLOWED_ORIGINS or CORS_ALLOWED_ORIGIN_REGEXES.

Previously this setting was called CORS_ORIGIN_ALLOW_ALL, which still works as an alias, with the new name taking precedence

https://github.com/adamchainz/django-cors-headers#cors_allow_all_origins-bool

0👍

So after hours of stressing and frustrations, this is how I solved this. I maintained my Vue JS code as below

async login() {
            const response = await axios.post('auth/login/', {
                        username: this.username,
                        password: this.password
                    });
            console.log(response)

        },

and in my Django settings.py file I had to add these two lines:

CORS_ALLOW_HEADERS = "*"
CORS_ORIGIN_WHITELIST = [
    'http://127.0.0.1:5173',
]

Since Alex pointed out that CORS_ALLOW_ALL_ORIGINS = True can be dangerous hence the CORS_ORIGIN_WHITELIST block.

Leave a comment