Cors error when accessing Django Rest API from front end Using Axios

Question

Accessing django Rest API using axios gives following error

Access to XMLHttpRequest at 'http://api.localhost:8080/auth/register-shop/' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

I added django cors headers as mention in this link https://pypi.org/project/django-cors-headers/

frontend page

 axios({
                                method: 'post',
                                url: 'http://api.localhost:8080/auth/register-shop/',
                                //url: 'http://api.yuniq.ml/auth/register-shop/',

                                headers: {
                                        "Access-Control-Allow-Origin": "*",
                                        "content-type": "application/json"
                                },
                                data: {

                                        "name": Name,
                                        "address": Address,
                                        "city": City,
                                        "postalC ode": PostalCode,
                                        "telephone": Telephone,
                                        "openTime": Opentime,
                                        "closeTime": Closetime,
                                        "image_url": Image_url  //still not working 

                                }
                        }).then(function (response) {
                                console.log(response);
                        })
                                .catch(function (error) {
                                        console.log(error);
                                });


                }

settings.py

INSTALLED_APPS = ['corsheaders']


MIDDLEWARE = [

    'django_hosts.middleware.HostsRequestMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware' , #add cors middleware
    'django.middleware.common.CommonMiddleware',
    'corsheaders.middleware.CorsPostCsrfMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'django_hosts.middleware.HostsResponseMiddleware',
]



CORS_ORIGIN_ALLOW_ALL = True

error not solved after doing this

Check ALLOWED_HOSTS in settings.py. Set it as this ALLOWED_HOSTS = ["*"] — Karthik RP
– Karthik RP, Commented May 10, 2019 at 7:07
Remove Access-Control-Allow-Origin": "*" from your axios call in your frontend JavaScript code. — sideshowbarker
– sideshowbarker, Commented May 10, 2019 at 9:17
Can't you add access control to your response from django view? response = HttpResponse(json.dumps(string)) response["Access-Control-Allow-Origin"] = "*" return response — Mehran Nouri
– Mehran Nouri, Commented May 10, 2019 at 10:31

shahab kamali · Accepted Answer · 2020-09-20 07:37:27Z

I had the same problem and did the below steps:

I checked what headers are sending from the Axios.
make sure this package is installed

'pip install django-cors-headers'

 INSTALLED_APPS = [
        ...,
        'corsheaders',
        ...
 ]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

Now there are two options:

1 - Allow access to all domains by just Adding the following variables in settings.py:

ALLOWED_HOSTS=['*']

CORS_ORIGIN_ALLOW_ALL = True

2 - Do not allow access to all the domains, but the one which you are consuming the API. Add the following variables in settings.py

ALLOWED_HOSTS=['http://localhost:5000']

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = ( 'http://localhost:5000', )

Also you can define allow hearders in setting.py if you want to send a specific header with your request.

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_HEADERS = [   
    ...
    'Currency',
    ...
 ]

checking out this can help you:

https://dzone.com/articles/how-to-fix-django-cors-error

user12538579 · Accepted Answer · 2021-01-14 14:45:40Z

1

Your axios request should not include this header: "Access-Control-Allow-Origin": "*",

That should only be included in the server's response. Try removing it from your axios request.

answered Jan 14, 2021 at 14:45

user12538579

194 bronze badges

Comments

Md. Tanvir Raihan · Accepted Answer · 2020-05-20 05:31:33Z

0

I recently faced same issue and i have solved it. I am also using corsheaders to avoid CORS errors and it works fine till i introduce Authentication. The same problem starts again for those api's which permission is set to IsAuthenticated. So i add the certain host in my ALLOWED_HOSTS list in settings.py and its worked. There are two options to add hosts.

Option 1. ALLOWED_HOSTS=["*"]

Option 2. ALLOWED_HOSTS=['your host1', 'your host2', 'your host3', ......].

NOTE: I don't prefer Option 1, because it will raise security issues. So choose Option 2.

answered May 20, 2020 at 5:31

Md. Tanvir Raihan

4,33510 gold badges41 silver badges73 bronze badges

Collectives™ on Stack Overflow

Cors error when accessing Django Rest API from front end Using Axios

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related