2017-04-03 5 views
0

나는 POST 요청 보낼 REDUX-무용담을 사용하여 다음과 같은 코드가 있습니다가져 오기 게시물이 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}); 
    } 
} 

을하지만 아약스는 내 코드에 무슨 년대 'OPTION'방식으로 전송? 왜 효과가 없습니까?

답변

2

요청을 보내는 서버는 Content-Type이 포함 된 Access-Control-Allow-Headers 응답 헤더를 보내도록 구성되어야합니다.

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-data, text/plain는 브라우저가 OPTIONS 요청을 전송하고 응답이 Access-Control-Allow-Headers 포함하는지 것에 응답 확인을 포함하는 경우 응답 헤더의 값은 Content-Type입니다.

브라우저에 응답에 해당 값이 포함 된 응답 헤더가 포함되어있는 것으로 확인되면 브라우저는 코드로 시도하려는 실제 POST 요청을 전송합니다. 그러나 브라우저가 대신 응답에 해당 헤더가 포함되어 있지 않거나 헤더에 Content-Type이 포함되어 있지 않으면 브라우저가 바로 멈추고 POST을 전송하지 않습니다.