Django Rest Framework CORS阻止XMLHttpRequest

问题描述

我已经使用Django-cors-headers设置了我的CORS策略，并具有以下设置：

I have set up my CORS policy using Django-cors-headers with the following settings:

APPEND_SLASH=False
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'localhost:8000',
    'localhost:3000',
    'localhost'
)

我也将其添加到install_apps和中间件中。

I have also added it to installed_apps and middleware.

现在我正在为前端制作一个React应用程序，并使用AXIOS来处理我的API请求。当我发出API请求以登录我的应用程序时，CORS策略允许它。但是，如果发出需要令牌的API请求，则会得到：

Now I am making a React app for the front end and using AXIOS for my API requests. When I make an API request to log in to my app the CORS policy allows it. But, if I make an API request that requires a Token, I get:

似乎我需要允许XMLHttpRequest用于支持的协议方案，但我在pypi文档中找不到与此有关的任何内容。

It seems that I need to allow XMLHttpRequest for supported protocol schemes but I cannot find anything in the pypi documentation about this.

编辑：
这是AXIOS请求：

Here is the AXIOS Request:

axios.post("localhost:8000/api/TestConnection/",
    {headers:
      {
          'Authorization': "Bearer " + localStorage.getItem('JWTAccess')
      }
    },
    {
      testString: 'Hello API'
    })
    .then(response => {
      console.log(response)
      })
    .catch(error => {
      console.log(error);
})

谢谢！

推荐答案

我解决了！解决方案非常简单（当然），

I solved it! The solution was very simple(of course),

对于请求，我需要使用@HenryM解决方案的一部分。

For the request I needed to use part of @HenryM 's solution.

首先，我需要建立默认网址：

First I needed to establish the default url:

axios.defaults.baseURL = 'http://127.0.0.1:8000/api/';

然后我将有效负载和标头保存为const变量：

Then I save the payload and header to const variables:

const header = {
  headers:{
    'Authorization': "Bearer " + localStorage.getItem('JWTAccess')
  }
}
const payload = {
  testValue: "Hello API"
}

最后，主要问题是我的参数顺序错误：

Finally, the main issue was that my parameters were in the wrong order:

axios.post("TestConnection/", payload, header)
    .then(response => {
      console.log(response)
      })
    .catch(error => {
      console.log(error);

显然是正确的顺序，至少在使用Django Rest时框架，是有效负载，然后是标题！！！！！！

Apparently the propper order, at least when using Django Rest Framework, is payload then header!!!

感谢所有厌倦帮助的人！
这是最后帮助我的文章：

Thank you to everyone who tired to help!This was the article that ended up helping me: https://www.techiediaries.com/django-vuejs-api-views/

这篇关于Django Rest Framework CORS阻止XMLHttpRequest的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！