Axios को हेडर फील्ड्स की प्रतिक्रिया मिलती है

Question

मैं रिएक्ट और रिडक्स के साथ एक फ्रंटएंड ऐप बना रहा हूं और मैं अपने अनुरोधों को करने के लिए axios का उपयोग कर रहा हूं । मैं प्रतिक्रिया के शीर्ष लेख में सभी क्षेत्रों तक पहुँच प्राप्त करना चाहूंगा। अपने ब्राउज़र में मैं हेडर का निरीक्षण कर सकता हूं और मैं देख सकता हूं कि मुझे जिन फील्ड्स की जरूरत है, वे मौजूद हैं (जैसे कि टोकन, यूआईडी, आदि ...), लेकिन जब मैं कॉल करता हूं

const request = axios.post(`${ROOT_URL}/auth/sign_in`, props);
request.then((response)=>{
  console.log(response.headers);
});

मुझे बस मिलता है

Object {content-type: "application/json; charset=utf-8", cache-control: "max-age=0, private, must-revalidate"}

यहां मेरा ब्राउज़र नेटवर्क टैब, जैसा कि आप देख सकते हैं कि अन्य सभी फ़ील्ड मौजूद हैं।

Bests।

Comments

यदि आप axios.defaults.headers का प्रिंट आउट लेते हैं, तो क्या इससे आपको किसी की याद आ रही है? कुछ शीर्षकों को उस स्तर पर कॉन्फ़िगर किया गया है, प्रत्येक अनुरोध पर नहीं (देखें github.com/mzabriskie/axios#global-axios-defaults )

— बेन हरे

क्या यह axios.defaults.headersREQUEST हैडर परमर्स को कॉन्फ़िगर करने के लिए नहीं है ? मुझे RESPONSE एक का उपयोग करने की आवश्यकता है। @ बेनहारे

— TWONEKSONE

BTW, जिसे आपने अनुरोध कहा है, वह अनुरोध नहीं है। यह आपकी प्रतिक्रिया के लिए एक वादा है। आपका अनुरोध वह था जो आपने तर्क के रूप में पोस्ट () पद्धति से पारित किया था।

— डैनियल

Answer 1

कोर अनुरोधों के मामले में, ब्राउज़र केवल डिफ़ॉल्ट रूप से निम्नलिखित प्रतिक्रिया हेडर का उपयोग कर सकते हैं:

• कैश-नियंत्रण
• सामग्री-भाषा
• सामग्री प्रकार
• समय-सीमा समाप्त
• अंतिम बार संशोधित
• pragma

यदि आप चाहते हैं कि आपका क्लाइंट ऐप अन्य हेडर का उपयोग करने में सक्षम हो, तो आपको सर्वर पर एक्सेस-कंट्रोल-एक्सपोज़- हेडर्स हेडर सेट करना होगा :

Access-Control-Expose-Headers: Access-Token, Uid

Comments

मेरा बुरा मैं उस क्षेत्र को उजागर करना भूल गया।

— TWONEKSONE

यदि आप रैक-कॉर्स के साथ रेल का उपयोग कर रहे हैं, तो आपको expose: ['Access-Token', 'Uid']मूल पर सेट करने की आवश्यकता है जैसे:resource '*', :headers => :any, :methods => [:get, :post, :put, :patch, :delete, :options, :head], expose: ['Access-Token', 'Uid']

— CWitty

मुझे नहीं मिला। यदि वे उजागर नहीं होते हैं, तो अतिरिक्त हेडर ब्राउज़र में क्यों दिखाई दे रहे हैं, लेकिन अक्षीय प्रतिक्रिया में नहीं?

— adanilev

@adanilev, ब्राउज़र आपको डिबगिंग उद्देश्यों के लिए उन्हें देखने की अनुमति देते हैं, लेकिन सुरक्षा कारणों से आपको एपीआई के माध्यम से उन्हें एक्सेस करने से रोकते हैं। यह क्लाइंट को सर्वर से सुरक्षित क्रेडेंशियल्स प्राप्त करने से रोकता है, जिससे सर्वर को यह निर्धारित करने की अनुमति मिलती है कि क्लाइंट की पहुंच क्या है। TLDR: यह सुरक्षा के लिए उद्देश्य पर किया है

— erfling

मैं अपने NGINX confg फ़ाइल में यह है ... 'Access-Control-Expose-Headers' 'Authorization, X-Suggested-Filename, content-disposition' always; अभी भी केवल content-type: "application/pdf" वास्तव में देखने की जरूरत हैcontent-disposition

— ओल्ड मैन वाल्टर

Answer 2

यह वास्तव में मेरी मदद की, आपके उत्तर के लिए Nick Uraltsev धन्यवाद।

आप का उपयोग करने का उन लोगों के लिए NodeJS साथ CORS :

...
const cors = require('cors');

const corsOptions = {
  exposedHeaders: 'Authorization',
};

app.use(cors(corsOptions));
...

मामले में आप जिस तरीके से प्रतिक्रिया भेज रहे हैं res.header('Authorization', `Bearer ${token}`).send();

Comments

सोच रहे लोगों के लिए, आप यहां एक सरणी भी पास कर सकते हैं: उजागरकर्ता: ['प्राधिकरण ’, Total एक्स-टोटल-काउंट’]

— थियागो सैंटाना

Answer 3

मैं उसी समस्या का सामना कर रहा था। Y ने मेरे "WebSecurity.java" में ऐसा किया, यह cors कॉन्फ़िगरेशन में setExposedHeaders विधि के बारे में है।

@Bean
CorsConfigurationSource corsConfigurationSource() {

    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowCredentials(true);
    configuration.setAllowedOrigins(Arrays.asList(FRONT_END_SERVER));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));
    configuration.setAllowedHeaders(Arrays.asList("X-Requested-With","Origin","Content-Type","Accept","Authorization"));

    // This allow us to expose the headers
    configuration.setExposedHeaders(Arrays.asList("Access-Control-Allow-Headers", "Authorization, x-xsrf-token, Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, " +
            "Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"));

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

मैं आशा करता हूँ यह काम करेगा।

Answer 4

Asp.net कोर में एक ही समस्या का सामना करना पड़ा आशा है कि यह मदद करता है

public static class CorsConfig
{
    public static void AddCorsConfig(this IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder
                .WithExposedHeaders("X-Pagination")
                );
        });
    }
}

Comments

एसओ में आपका स्वागत है! आपका उत्तर सही हो सकता है लेकिन StackOverflow पर, यह केवल उत्तर कोड को पोस्ट करने के लिए हतोत्साहित किया जाता है। कृपया यह बताने का प्रयास करें कि आपका उत्तर मूल प्रश्न को कैसे हल करता है। कृपया इसे बेहतर उत्तर लिखने के

— nircraft

धन्यवाद, इसने मदद की थी;)

— फ्लोरियन

Answer 5

आधिकारिक डॉक्स के अनुसार :

यदि आप HTTP हेडर चाहते हैं जो सर्वर के साथ प्रतिक्रिया करता है तो यह मदद कर सकता है । सभी शीर्ष लेख नाम कम आवरण वाले होते हैं और इन्हें ब्रैकेट संकेतन का उपयोग करके एक्सेस किया जा सकता है। उदाहरण: response.headers['content-type']कुछ इस तरह देंगे: हेडर: {},

Answer 6

स्प्रिंगबूट 2 के लिए बस जोड़ें

httpResponse.setHeader("Access-Control-Expose-Headers", "custom-header1, custom-header2");

अपने CORS फ़िल्टर कार्यान्वयन कोड को श्वेतसूची custom-header1और custom-header2आदि के लिए

Answer 7

django मदद के लिए

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

Answer 8

स्प्रिंग बूट 2 के लिए यदि आप वैश्विक कॉर्स कॉन्फ़िगरेशन का उपयोग नहीं करना चाहते हैं, तो आप इसे @CrossOriginश्रद्धांजलि के साथ उपयोग करके विधि या वर्ग / नियंत्रक स्तर से कर सकते हैं exposedHeaders।

उदाहरण के लिए, तरीकों के authorizationलिए हेडर जोड़ने के लिए YourController:

@CrossOrigin(exposedHeaders = "authorization")
@RestController
public class YourController {
    ...
}