Fetch Post 在 redux-saga 中不起作用？答案

【问题标题】：Fetch Post not working in redux-saga?Fetch Post 在 redux-saga 中不起作用？
【发布时间】：2017-08-27 19:19:24
【问题描述】：

我有以下代码通过使用 redux-saga 发送一个 post 请求：

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

但是使用 'OPTION' 方法发送了一个 ajax，我的代码有什么问题？为什么它不起作用？

【问题讨论】：

标签： reactjs redux cors fetch-api redux-saga

【解决方案1】：

您要向其发送请求的服务器必须配置为发送 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 协议要求，如果一个跨域请求包含一个Content-Type 请求头，其值不是application/x-www-form-urlencoded， multipart/form-data, text/plain，浏览器发送一个OPTIONS 请求，然后检查响应以查看响应是否包含Access-Control-Allow-Headers 响应标头，其值包含Content-Type。

如果浏览器发现响应包含包含该值的响应标头，则浏览器将继续发送您尝试使用代码发出的实际 POST 请求。但如果浏览器发现响应中不包含该标头，或者标头不包含Content-Type，则浏览器将停在那里而不发送POST。

【讨论】：