쿠키로 API 가져 오기

새 Fetch API를 사용하려고하는데 쿠키에 문제가 있습니다. 특히 로그인에 성공하면 이후 요청에 쿠키 헤더가 있지만 Fetch는 해당 헤더를 무시하는 것으로 보이며 Fetch로 작성된 모든 요청은 권한이 없습니다.

Fetch가 아직 준비되지 않았거나 Fetch가 쿠키와 작동하지 않기 때문입니까?

Webpack으로 앱을 빌드합니다. 또한 React Native에서 Fetch를 사용하는데 같은 문제가 없습니다.

가져 오기는 기본적으로 쿠키를 사용하지 않습니다. 쿠키를 활성화하려면 다음과 같이하십시오 :

fetch(url, {
  credentials: "same-origin"
}).then(...).catch(...);

교차 출처 요청을하는 사람들을위한 @Khanetor의 답변 외에도 : credentials: 'include'

샘플 JSON 페치 요청 :

fetch(url, {
  method: 'GET',
  credentials: 'include'
})
  .then((response) => response.json())
  .then((json) => {
    console.log('Gotcha');
  }).catch((err) => {
    console.log(err);
});

https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials

방금 해결했습니다. 그냥 두 f. 잔인한 날

나를 위해 비밀은 다음과 같습니다.

1. POST / api / auth에 전화를 걸어 쿠키가 성공적으로 수신되었음을 확인했습니다.

2. 그런 다음 credentials: 'include'요청과 함께 쿠키가 전송되지 않았으므로 GET / api / users /를 호출 하고 401 인증을받지 못했습니다.

KEY는 credentials: 'include'첫 번째 /api/auth통화에도 설정됩니다.

2019 년에이 내용을 읽는 경우 credentials: "same-origin"기본값입니다.

fetch(url).then

.net webapi2사용자를 위해 여기에 정답을 추가하십시오 .

cors클라이언트 사이트가 다른 주소에서 제공되기 때문에 사용 하는 경우 서버 측 구성 webapi에도 포함해야 SupportsCredentials=true합니다.

        // Access-Control-Allow-Origin
        // https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api
        var cors = new EnableCorsAttribute(Settings.CORSSites,"*", "*");
        cors.SupportsCredentials = true;
        config.EnableCors(cors);

이것은 나를 위해 작동합니다 :

import Cookies from 'universal-cookie';
const cookies = new Cookies();

function headers(set_cookie=false) {
  let headers = {
    'Accept':       'application/json',
    'Content-Type': 'application/json',
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
};
if (set_cookie) {
    headers['Authorization'] = "Bearer " + cookies.get('remember_user_token');
}
return headers;
}

그런 다음 전화를하십시오.

export function fetchTests(user_id) {
  return function (dispatch) {
   let data = {
    method:      'POST',
    credentials: 'same-origin',
    mode:        'same-origin',
    body:        JSON.stringify({
                     user_id: user_id
                }),
    headers:     headers(true)
   };
   return fetch('/api/v1/tests/listing/', data)
      .then(response => response.json())
      .then(json => dispatch(receiveTests(json)));
    };
  }