状态代码为200的Cors Post请求上的Axios网络错误

Question

我使用axios与自己的API（不是用NodeJS编写的）通信。

当我发布一个非简单的请求时，axios总是直接转到控制台中显示网络错误的catch块，即使有2个成功的Http请求。

错误：网络错误堆栈跟踪:createerror@http://localhost:3000/statist/js/bundle.js:1634:15 handleerror@http://localhost:3000/statist/js/bundle.js:1170:14

还有一个关于丢失头部的CORS警告

跨源请求被阻止：同一源策略不允许读取http://127.0.0.1:8080的远程资源。（原因：CORS标头'Access-Control-Allow-Origin'丢失）。

但是它包含在选项请求中！

postForm = () => {
    axios.post("http://127.0.0.1:8080/",
            myComplexObj, {
                headers: {
                    //'Access-Control-Allow-Origin': '*',
                    'Content-Type': 'application/json'
                },
                timeout: 15000
            }
        ).then(res => {
            console.log(res);
            alert('success');
        })

        .catch(function(error) {
            //code always end up here
            console.log(error);
            /*Error: Network Error
           Stack trace:
           createError@http://localhost:3000/static/js/bundle.js:1634:15
           handleError@http://localhost:3000/static/js/bundle.js:1170:14
           */

            console.log(error.response);      //undefined
            console.log(error.response.data); //undefined
            }
        })

• 删除超时//无更改
• 删除Catch块//仍然没有成功
• 在选项和/或Post请求上返回状态代码204//无差异

Answer 1

但是，如果缺少Access-Control-Allow-Origin标头，则浏览器将不允许您访问CORS请求的响应，这会使您感到困惑。

以下是一些很棒的文章，解释了CORS是如何工作的：

https://www.html5rocks.com/en/tutorials/cors/
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

不管怎样，我认为你在利用Django。因此，您需要添加到settings.py：

CORS_ORIGIN_WHITELIST = (
   'localhost:8080',
   'localhost'
)