Django Rest Framework CORS阻止XMLHttpRequest [英] Django Rest Framework CORS blocking 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:

在'localhost：8000 / api / TestConnection处访问XMLHttpRequest /'来自来源' http：// localhost：3000 '已被CORS政策阻止：仅支持跨来源请求对于协议方案：http，数据，chrome，chrome扩展名，https。

Access to XMLHttpRequest at 'localhost:8000/api/TestConnection/' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

似乎我需要允许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!!!

感谢所有厌倦帮助的人！
这是最后帮助我的文章： https://www.techiediaries.com/django-vuejs-api-v iews /

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！