Fetch: Warum ändert sich mein Inhaltstyp?

Question

Das sind zwei Fragen in einem. Ich bin ziemlich solide in Rails, aber ein Neuling bei react/redux und ich habe Probleme damit, die Authentifizierung in der react/redux-App zu implementieren.

Ich habe eine Rails 4 API, die ich gebaut habe. Es ist gut getestet und solide. Meine Rails-API verwendet das Token devise-token-auth.

fetch('http://localhost:8080/api/auth/sign_in', { 
    method: 'POST', 
    headers: {'Content-Type': 'application/json', 'Accept': "application/vnd.myproject.v1"}, 
    body: {email: email, password: password}, 
    ... // snip response handling 
}) 

Und doch, wenn es eine Anforderung sendet, gibt meine API ein 401 Unauthorized und die Anforderung fehlschlägt.

Beim Auschecken des Serverprotokolls wird der für die Anforderung gesendete Text nicht angezeigt.

params: {"format"=>"json", "controller"=>"devise_token_auth/sessions", "action"=>"create"} 

einen Blick auf die Anfrage in der Netzwerkansicht von meinem Browser machen, sehe ich die sign_in Anfrage mit dem folgenden:

accept:application/vnd.myproject.v1 
content-type:text/plain;charset=UTF-8 

Ich sehe, dass der Content-Type jetzt text/plain ist. (Interessant, dass "akzeptieren" klein geschrieben ist ... Ich frage mich auch darüber.)

Kann mir jemand erklären, was passiert?

Answer 1

Sie benötigen X-CSRF-TOKEN mit Ihrem Post-Anfragen oder sollten Sie überspringen senden verify_authenticity_token

Wenn Sie überspringen authenticity_token Überprüfung möchten, können Sie so etwas wie verwenden:

class ApplicationController < ActionController::Base 
    protect_from_forgery 
    skip_before_action :verify_authenticity_token, if: :json_request? 

    protected 

    def json_request? 
    request.format.json? 
    end 
end 

Wenn Sie möchten, zum Setzen der Kopfzeile, siehe Beispiel jQuery Ajax Anfrage:

   $.ajax({ 
         type: 'POST', 
         dataType: 'script', 
         beforeSend: function (xhr) { 
          xhr.setRequestHeader('X-CSRF-Token', 
           $('meta[name="csrf-token"]').attr('content')); 
         }, url: $(ui.item).closest('.sortable').data("sortable-link"), 
         success: function (data) { 
          .... 
         } 
        });