Fetch Post 在 redux-saga 中不起作用?
Posted
技术标签:
【中文标题】Fetch Post 在 redux-saga 中不起作用?【英文标题】:Fetch Post not working in 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,我的代码有什么问题?为什么它不起作用?
【问题讨论】:
【参考方案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
。
【讨论】:
以上是关于Fetch Post 在 redux-saga 中不起作用?的主要内容,如果未能解决你的问题,请参考以下文章
在 React 中使用 Redux-Saga/Fetch-mock 测试重定向路由
使用 redux-saga 和 fetch 自动处理 401 响应
redux-saga api yield 调用有效,但没有返回数据