Fetch Post在redux-saga中不起作用?

时间:2017-04-03 03:01:14

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

通过使用redux-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'发送。方法,我的代码有什么问题?为什么它不起作用?

1 个答案:

答案 0 :(得分:3)

您发送请求的服务器必须配置为发送值为var sum = 0; for (var i = 0; i < this.chart.config.data.datasets[0].data.length; i++) { sum += this.chart.config.data.datasets[0].data[i]; } 的{​​{1}}响应标头。

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

在这种情况下,浏览器执行预检的具体原因是请求包含Access-Control-Allow-Headers请求标头。 CORS协议要求如果跨源请求包含Content-Type请求标头,其值不是Content-Type: application/jsonContent-Typeapplication/x-www-form-urlencoded,浏览器发送multipart/form-data请求,然后检查对该请求的响应,以查看响应是否包含text/plain响应标头,其值包含OPTIONS

如果浏览器发现响应包含包含该值的响应标头,则浏览器将继续发送您尝试使用代码生成的实际Access-Control-Allow-Headers请求。但是,如果浏览器发现响应未包含该标头,或者标头不包含Content-Type,则浏览器将停在那里而不发送POST