2017-04-03 55 views
0

我以终极版 - 佐贺发送POST请求下面的代码:Fetch Post不能在REDX-SAGA中工作?

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

但一个Ajax与“OPTION”方法派,有什么错我的代码?为什么它不起作用?

回答

2

您要发送请求的服务器必须配置为发送Access-Control-Allow-Headers响应标头,其值包含Content-Type

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests解释这里发生了什么。您的请求触发您的浏览器发送CORS“预检”。

浏览器在这种情况下执行预检的具体原因是该请求包含Content-Type: application/json请求标头。所述CORS协议要求,如果跨来源请求包括与比application/x-www-form-urlencoded其他的值的Content-Type请求头, multipart/form-datatext/plain,浏览器发送一个OPTIONS请求,然后检查该响应,看是否响应包括Access-Control-Allow-Headers响应头,其值包含Content-Type

如果浏览器发现响应包含一个包含该值的响应头,那么浏览器将继续发送您试图使用您的代码发出的实际的POST请求。但是,如果浏览器发现响应不包含该标题,或者标题不包含Content-Type,则浏览器将在此处停止并且不会发送POST