DjangoはFetchでPOSTリクエストで403エラーを返します

Question

graphene-djangoを使用して実装されたgraphqlサーバーがあります。私は理由CORSの問題のため、私は403を取得し、取得してこの呼び出しをしようとすると、しかし

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

：私はこのようにjqueryのを使用して、それにクエリーを行うことができます。私は、呼び出し前にajaxSetupを追加することによって、jQueryで同じ問題を解決しました。

はここでフェッチ使用して呼び出します：

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を追加してみました。私は資格情報を追加しようとしました：the docs sayとして '含まれて'、再び幸運。私は資格情報を使って試しました：「同じ起源」とこのオプションを別々に組み合わせて、同じ結果を返します。これに関して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の状態である場合には）、そのポストの要求が異なるドメインを形成させるアドオンは、以下のことを確認したい場合は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

から撮影設定ファイル：

INSTALLED_APPS = [
'corsheaders'、： 'coreHeaders' を使用する

1. 更新INSTALLED_APPS ]

2. ホワイトリストの設定に以下を追加して、フロントエンドドメインが再びファイル：（ は 'ローカルホスト：8080'、 を）=

   CORS_ORIGIN_WHITELIST

今許可誰にでもこの投稿要求を行う許可：

注：サーバー上に何かを投稿するためにユーザーを認証する必要がない場合、たとえば新規ユーザーが初めて登録するときに使用する必要があります。。

from rest_framework.permissions import AllowAny 

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