Question

我有一个使用graphene-django实现的graphql服务器。我可以使用像这样的jquery对它进行查询：

function allIngredients() {
    return 'query{allProducts{edges{node{name}}}}'
  }
  var query = allIngredients();
  $.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
  });
  $.post("/graphql", {query: query}, function(response) {
    console.log(response);
  })

但是，当我尝试使用Fetch进行此调用时，由于CORS问题，我得到403。我通过在调用之前添加ajaxSetup来解决jQuery中的同样问题。

这是使用fetch调用的电话：

fetch('/graphql', {
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
        },
        credentials: 'include',
        body: JSON.stringify({
          csrfmiddlewaretoken: '{{ csrf_token }}',
          query:`{allProducts{
            edges{
              node{
                id
                name
                orderPrice
                sellPrice
              }
            }
          }`})
      }
    )
    .then(function(response) {
        if (response.status >= 400) {
            throw new Error("Bad response from server");
        }
        return response.json();
    })

我尝试以类似于jQuery示例的方式将csrfmiddlewaretoken添加到正文中，没有运气。我尝试添加凭据：＆＃39; include＆＃39;作为the docs say，再次没有运气。我尝试过凭据：＆＃39;同源＆＃39;并且以不同的方式组合这些选项，同样的结果。 Web对此非常安静，我做错了什么？

Answer 1

解决方案是在getCookie（）方法中。

  fetch("/graphql", {
        method: "POST",
        credentials: "same-origin",
        headers: {
          "X-CSRFToken": getCookie("csrftoken"),
          "Accept": "application/json",
          'Content-Type': 'application/json'
        },
        body:JSON.stringify(query)
      })

当然，该方法必须在同一页面上。取自Django Docs.

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 = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

Answer 2

如果你想将该帖子请求形成一个不同的域（如果应用程序的前面是React或angular，而后端是Django），请确保在设置文件中添加以下内容：

更新INSTALLED_APPS以使用＆＃39; coreHeaders＆＃39; ：

INSTALLED_APPS = [
＆＃39; corsheaders＆＃39 ;,
]

通过再次向设置文件添加以下内容，白名单列出您的前端域名：

CORS_ORIGIN_WHITELIST =（＆＃39;本地主机：8080＆＃39 ;, ）

现在允许任何人发布此帖子请求的权限：

注意：如果您不需要对用户进行身份验证以便在我们的服务器上发布任何内容（例如，新用户首次注册时），则应使用此选项。

from rest_framework.permissions import AllowAny class CreateUser(APIView): permission_classes = (AllowAny,) def post(self, request, format=None): return(Response("hi"))

Django使用Fetch在POST请求上返回403错误

2 个答案: