CORS策略已阻止从来源“ http：// localhost：3000”访问“ http：// localhost：8000 / api / posts /”处的XMLHttpRequest Django和React

如何解决CORS策略已阻止从来源“ http：// localhost：3000”访问“ http：// localhost：8000 / api / posts /”处的XMLHttpRequest Django和React

我正在使用Django和React创建一个全栈应用程序。

我创建了一个使用cookie的组件查找。这是我的代码：

  function getCookie(name) {
  var cookieValue = null;
  if (document.cookie && document.cookie !== '') {
      var cookies = document.cookie.split(';');
      for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i].trim();
          if (cookie.substring(0,name.length + 1) === (name + '=')) {
              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
              break;
          }
      }
  }
  return cookieValue;
}

function lookup(method,endpoint,callback,data) {
  let jsonData;
  if (data){
    jsonData = JSON.stringify(data)
  }
  const xhr = new XMLHttpRequest()
  const url = `http://localhost:8000/api${endpoint}`
  xhr.responseType = "json"
  const csrftoken = getCookie('csrftoken');
  xhr.open(method,url)
  xhr.setRequestHeader("Content-Type","application/json")

  if (csrftoken){
    xhr.setRequestHeader("HTTP_X_REQUESTED_WITH","XMLHttpRequest")
    xhr.setRequestHeader("X-Requested-With","XMLHttpRequest")
    xhr.setRequestHeader("X-CSrftoken",csrftoken)
  }
  
  xhr.onload = function() {
    callback(xhr.response,xhr.status)
  }
  xhr.onerror = function (e) {
    console.log(e)
    callback({"message": "The request was an error"},400)
  }
  xhr.send(jsonData)
}

export function createPost(newPost,callback){
  lookup("POST","/posts/create/",{content: newPost})
}

export function loadPosts(callback) {
    lookup("GET","/posts/",callback)
}

此代码在我的前端导致此错误：（后端工作正常）从CORS策略阻止从源“ http：// localhost：3000”访问“ http：// localhost：8000 / api / posts /”处的XMLHttpRequest：Access-Control-Allow-不允许请求标头字段http_x_requested_with飞行前响应中出现标题。

现在，我意识到如果删除此内容：

 if (csrftoken){
    xhr.setRequestHeader("HTTP_X_REQUESTED_WITH",csrftoken)
  }

我的代码工作正常。

为什么会这样？如果还有什么我应该上传的，让我知道
如果只是我的个人项目，您认为跳过csrftoken是否合理？

解决方法

首先，您的django环境中是否安装了corsheaders？如果没有通过pip install django-cors-headers

安装

然后在您的settings.py中添加：

INSTALLED_APPS = [
...
'corsheaders',...]

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware','django.middleware.common.CommonMiddleware',...]

CORS_ALLOWED_ORIGINS = [
"https://example.com",//ADD YOUR REACT IP IN THIS LIST
"https://sub.example.com","http://localhost:8080","http://127.0.0.1:9000"]

然后尝试再次调用您的后端，它现在应该可以正常工作。

我遇到了完全相同的问题。但我所做的只是在我的 settings.py 中添加 CORS_ALLOW_HEADERS，仅此而已：

**
CORS_ALLOW_HEADERS = ['*'] //This line did the magic for me
**

还有以下内容：

INSTALLED_APPS = [
     ...
    'corsheaders',...
]

MIDDLEWARE = [
     ...
    'corsheaders.middleware.CorsMiddleware',...
]

ALLOWED_HOSTS = ['*']

CORS_ALLOW_ALL_ORIGINS = True

下面这行与包含类似 api 的 url 相关 http://localhost:8000/api/anytext

CORS_URLS_REGEX = r'^/api/.*$'