Axios 总是因为某种原因失败答案

【问题标题】：Axios always fails for some reasonAxios 总是因为某种原因失败
【发布时间】：2017-11-22 01:16:54
【问题描述】：

      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);
            });
    }

由于某种原因，此代码总是失败并警告“否”。我正在尝试的端点是有效的，并且可以通过 curl 中的这些参数访问。有什么想法有什么问题吗？

我确实有：

import axios from 'axios';

控制台输出：

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.

【问题讨论】：

它给出的控制台错误是什么
编辑帖子以反映
来自浏览器的 API 请求需要使用 Access-Control-Allow-Origin 标头进行验证，您需要从您的 API 提供这些标头
如果您使用的是 NODEJS API，请参阅stackoverflow.com/questions/39990550/…
我使用 Python/Django 作为我的 API 提供程序。考虑提供这个。谢谢。

标签： reactjs

【解决方案1】：

由于Same-origin policy，JavaScript 无法读取您的请求。为了允许跨域请求，您必须在服务器端启用Cross-Origin Resource Sharing (CORS) headers。出于开发目的，您可以使用代理（自己的，或a simple service like crossorigin.me）或Allow-Control-Allow-Origin: * Chrome Extension。

要允许来自任何域的调用，您必须提供以下标头（* - 表示任何域，但是您可以在此处列出域）：

Access-Control-Allow-Origin: *

要在 Django 应用中启用 CORS，请参阅 django-cors-headers 或 django-cors-middleware。

【讨论】：