Fetch Post funktioniert nicht in Redux-Saga?

Question

ich den folgenden Code haben redux-Saga durch die Verwendung eines Post-Anforderung zu senden:

import {put, call, fork, takeEvery} from 'redux-saga/effects'; 
import fetch from 'isomorphic-fetch'; 
const url = 'xxx/api/posts'; 


function* addPost(data) { 
    try{ 
     const response = yield fetch(url, { 
      method: 'POST', 
      headers: { 
       'Accept': 'application/json, application/xml, text/plain, text/html, *.*', 
       'Content-Type': 'application/json; charset=utf-8' 
      }, 
      body: JSON.stringify(data) 
     }); 
     const id = yield response.json().id; 
     yield put({type: types.ADD_POST, payload: {id, title, content }}); 
    }catch(e) { 
     yield put({type: types.ERROR, payload: e}); 
    } 
} 

Aber ein Ajax mit dem OPTION-Methode gesendet, was mit meinem Code falsch? Warum es nicht funktioniert?

Answer 1

Der Server, an den Sie die Anfrage senden, muss so konfiguriert sein, dass er einen Antwortkopf Access-Control-Allow-Headers sendet, dessen Wert enthält.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests erklärt, was hier passiert. Ihre Anfrage veranlasst Ihren Browser, ein CORS Preflight zu senden.

Der spezifische Grund, warum der Browser das Preflight in diesem Fall ausführt, ist, dass die Anforderung einen Anforderungsheader Content-Type: application/json enthält. Das CORS-Protokoll verlangt, dass, wenn eine Querursprungsanforderung enthält einen Content-Type Request-Header mit einem anderen Wert als application/x-www-form-urlencoded, multipart/form-data, text/plain, sendet der Browser eine OPTIONS Anforderung und überprüft dann die Antwort darauf zu sehen, ob die Antwort ein Access-Control-Allow-Headers enthält Antwortheader, dessen Wert Content-Type enthält.

Wenn der Browser feststellt, dass die Antwort einen Antwort-Header enthält, der diesen Wert enthält, wird der Browser die aktuelle POST Anfrage senden, die Sie mit Ihrem Code erstellen möchten. Wenn der Browser stattdessen feststellt, dass die Antwort diesen Header nicht enthält oder dass der Header Content-Type nicht enthält, wird der Browser genau dort anhalten und nicht die POST senden.