कुकी के साथ एपीआई प्राप्त करें

Question

मैं नए फ़ेच एपीआई की कोशिश कर रहा हूं, लेकिन कुकीज़ को लेकर परेशानी हो रही है। विशेष रूप से, एक सफल लॉगिन के बाद, भविष्य के अनुरोधों में एक कुकी शीर्षलेख है, लेकिन Fetch उस हेडर को अनदेखा करता है, और Fetch के साथ किए गए मेरे सभी अनुरोध अनधिकृत हैं।

क्या ऐसा इसलिए है क्योंकि फ़ॉच अभी भी तैयार नहीं है या फ़ॉर्च कुकीज़ के साथ काम नहीं करता है?

मैं वेबपैक के साथ अपना ऐप बनाता हूं। मैं Fetch in React Native का भी उपयोग करता हूं, जिसमें समान मुद्दा नहीं है।

Answer 1

फ़ेच डिफ़ॉल्ट रूप से कुकी का उपयोग नहीं करता है। कुकी को सक्षम करने के लिए, यह करें:

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

Comments

समान-मूल अब काम नहीं करता है, इसमें शामिल है (@ जैरी का जवाब देखें): Developers.google.com/web/updates/2015/03/introduction-to-fetch

— jpic

@jpic: 'में' केवल क्रॉस-ऑरिजिन रिक्वेस्ट के लिए ही काम करता है, लेकिन समान-ऑरिजिनल रिक्वेस्ट के लिए नहीं। आधिकारिक डॉक्स: github.com/github/fetch#sending-cookies

— HoldOffHunger

तब क्या कारण है कि httponly कूकीज अगर वे जेएस में लाने के साथ पठनीय हैं?

— मार्टिन बाजकर

मेरा मानना ​​है कि same-origin(जो अभी भी काम करता है ) का अर्थ है कि अधिक हेडर का सम्मान किया जाएगा (कुकीज़, आदि) लेकिन आपके कोड की प्रतिक्रिया तक सीमित पहुंच होगी।

— 15

@JohnBalvinAriasThx। जैसा कि मैंने बाद में समझा, कुकी httponly होने का मतलब है कि यह पठनीय नहीं है document.cookie, लेकिन फिर भी उपलब्ध है या ajax या लाने के लिए अनुरोध करता है।

— मार्टिन बाजकर

Answer 2

@ खानेटोर के जवाब के अलावा, उन लोगों के लिए जो क्रॉस-ऑरिजनल रिक्वेस्ट के साथ काम कर रहे हैं: 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

Comments

हालांकि आप कुकी कैसे सेट करते हैं?

— 17

कुकी सर्वर-साइड से सेट की गई है। मेरे मामले में मैं httponly कुकीज़ का उपयोग कर रहा था।

— खनतोर

@Khanetor मैं जावास्क्रिप्ट द्वारा document.cookie का उपयोग करके कुकीज़ सेट कर सकता हूं, और फिर अनुरोध भेजें?

— 1417

@ospider आप इसे हेडर में भेज सकते हैं।

— 10101010

@ospider मैंने पाया कि document.cookieअनुरोधों में शामिल करने के लिए बस मूल्य निर्धारित करना पर्याप्त था।

— ४

Answer 3

अभी हल किया है। बस दो च। क्रूरता के दिन

मेरे लिए रहस्य निम्नलिखित में था:

1. मैंने पोस्ट / एपीआई / ऑर्टरी को फोन किया और देखा कि कुकीज़ सफलतापूर्वक प्राप्त हुई थीं।

2. फिर GET / api / users / के साथ कॉल करना credentials: 'include'और 401 अनहुथ मिला, क्योंकि कोई कुकी अनुरोध के साथ नहीं भेजी गई थी।

कुंजी को credentials: 'include'पहले /api/authकॉल के लिए भी सेट करना है।

Comments

मुझे आपकी समस्या ठीक है। सत्र कुकी को GET डेटा अनुरोध पर कभी नहीं भेजा जाता है। इसलिए 401. मैंने Axios और Fetch की कोशिश की है। एक ही परिणाम। 2 संभावनाएँ: लॉगिन POST प्राप्त कुकी को संग्रहीत नहीं करता है या निम्नलिखित GET डेटा संग्रहीत कुकी नहीं भेजता है

— Rhubarb65

@ Rhubarb65, इस u को जीतने के credentials: 'include'लिए पहली बारPOST /api/auth

— user1671599

हां, मेरे पास वह था लेकिन यह पर्याप्त है। मैं एक

— डेसरवर

हां, मेरे पास साख थी लेकिन यह पर्याप्त नहीं था। मैं पिछले CORS: (क्लाइंट http) - प्रॉक्सी - (सर्वर https) प्राप्त करने के लिए एक डेवलेसर प्रॉक्सी का उपयोग कर रहा था। मेरा मानना ​​है कि सर्वर से सेशनिड कुकी ब्राउजर में सेट नहीं की गई थी क्योंकि सुरक्षित कुकीज़ को https की आवश्यकता होती है। इसलिए मैंने ध्वज को जोड़ा https:

— डेवलेवर

अच्छी तरह से चियर्स। आपके जवाब का मतलब यह था कि मुझे केवल 1 दिन की क्रूरता मिली। :)

— माइकल

Answer 4

यदि आप इसे 2019 में पढ़ रहे हैं, credentials: "same-origin"तो डिफ़ॉल्ट मान है।

fetch(url).then

Comments

लेकिन ध्यान दें कि हर कोई पर्याप्त रूप से अपडेट किए गए ब्राउज़र का उपयोग नहीं कर रहा है। मुझे यह सवाल इसलिए आया क्योंकि फ़ायरफ़ॉक्स का मेरा अपना संस्करण (60.x, डेबियन स्ट्रेच में सबसे हाल का) डिफ़ॉल्ट रूप से सेट नहीं है।

— दर्शन

Answer 5

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

Answer 6

यह मेरे लिए काम करता है:

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