Question

我已使用Django-cors-headers通过以下设置设置了我的CORS策略：

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

我还将它添加到了installd_apps和中间件中。

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

CORS策略已阻止从源“ http://localhost:3000”访问“ localhost：8000 / api / TestConnection /”处的XMLHttpRequest：仅协议方案支持跨源请求：http，数据，chrome，chrome -扩展名，https。

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

编辑：这是AXIOS请求：

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

谢谢！

Answer 1

我遇到了一个ReactNative应用程序的类似问题，这是由于ReactNative为本地主机使用IP 10.0.2.2而引起的（我不记得详细信息或原因）。我通过添加到课堂上解决了这个问题。

  componentWillMount() {
    axios.defaults.baseURL = 'http://10.0.2.2:8000/api/';
    axios.defaults.timeout = 1500;
  }

我不知道这是否是正确的IP，但可能值得一看。

编辑

handleRequest() {
    const payload = { username: this.state.username, password: this.state.password } 
    axios
      .post('login/', payload)
      .then(response => {
        const { token, user } = response.data;

        // We set the returned token as the default authorization header
        axios.defaults.headers.common.Authorization = `Token ${token}`;

        // Navigate to the home screen
        Actions.main();
      })
      .catch(error => {
            console.log(error)
      });
}

通过将令牌保存在标头中，始终可以发送该令牌。

Answer 2

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

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

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

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

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

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

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

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

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

感谢所有愿意帮助您的人！这篇文章最终对我有所帮助：https://www.techiediaries.com/django-vuejs-api-views/

Django Rest Framework CORS阻止XMLHttpRequest

2 个答案: