CODEWITHSUNDEEP
reactjs
JasonGenX
JasonGenX

Reputation: 5444

Axios always fails for some reason

      handleLoginClick(event) {

        var apiBaseUrl = "http://localhost:8000/api-token-auth/";
        var self = this;
        var payload={
            "email": "myusername",//this.state.username,
            "password": "mypassword"//this.state.password
        };
        axios.post(apiBaseUrl, payload)
            .then(function (response) {
                alert('success')
            })
            .catch(function (error) {
                alert('NO') .  // <----- always reaches here.
                console.log(error);
            });
    }

For some reason, this code always fails and alert 'NO'. the endpoint I'm trying is valid, and accessible with those parameters from curl. Any ideas what's wrong?

I do have:

import axios from 'axios';

Console output:

XMLHttpRequest cannot load http://localhost:8000/api-token-auth/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Upvotes: 0

Views: 636

Answers (1)

Przemysław Zalewski
Przemysław Zalewski

Reputation: 3996

Your requests are not readable by the JavaScript due to Same-origin policy. In order to allow cross-domain requests, you must enable Cross-Origin Resource Sharing (CORS) headers server-side. For development purposes, you may use a proxy (own, or a simple service like crossorigin.me) or the Allow-Control-Allow-Origin: * Chrome Extension.

To allow calls from any domain you must serve the following header (* - means any, however, you can list domains here):

Access-Control-Allow-Origin: *

To enable CORS in Django app please see django-cors-headers or django-cors-middleware.

Upvotes: 2

Related Questions