Axios yanıt başlığı alanlarına erişebilir

162

React ve Redux ile bir frontend uygulaması oluşturuyorum ve isteklerimi gerçekleştirmek için axios kullanıyorum . Yanıtın başlığındaki tüm alanlara erişmek istiyorum. Tarayıcımda başlığı inceleyebiliyorum ve ihtiyacım olan tüm alanların mevcut olduğunu görebiliyorum (jeton, uid vb.), Ancak aradığımda

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

Sadece anladım

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

İşte benim tarayıcı ağı sekmesi, diğer tüm alanları görebileceğiniz gibi.

Uygun Satılıklar.

http-headers es6-promise axios

— TWONEKSONE
kaynak

Eğer axios.defaults.headers çıktısını alırsanız, bu eksik olanlardan herhangi birini verir mi? Bazı üstbilgiler, her bir isteğin isteğinde değil, bu düzeyde yapılandırılır (bkz. Github.com/mzabriskie/axios#global-axios-defaults )

— Ben Hare

2

axios.defaults.headersREQUEST başlık parametrelerini yapılandırmak için değil mi? YANIT'a erişmem gerekiyor. @BenHare

— TWONEKSONE

BTW, istek olarak adlandırdığınız bir istek değildir. Cevabınız için bir söz. İsteğiniz, post () yöntemine bağımsız değişken olarak ilettiğiniz şeydi.

— Daniel

313

CORS istekleri durumunda, tarayıcılar varsayılan olarak yalnızca aşağıdaki yanıt başlıklarına erişebilir:

Cache-Control
Content-Language
İçerik türü
Süre sonu
Son düzenleme
Pragma

İstemci uygulamanızın diğer başlıklara erişmesini istiyorsanız , sunucuda Access-Control-Expose-Headers üstbilgisini ayarlamanız gerekir :

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

— Nick Uraltsev
kaynak

Benim hatam bu alanları açığa çıkarmayı unuttum.

— TWONEKSONE

28

Rack-Cors ile Raylar kullanıyorsanız expose: ['Access-Token', 'Uid'], başlangıç noktasını aşağıdaki gibi ayarlamanız gerekir :

resource '*', :headers => :any, :methods => [:get, :post, :put, :patch, :delete, :options, :head], expose: ['Access-Token', 'Uid']

— CWitty

3

Anlamıyorum. Açıkta kalmazlarsa, ek başlıklar neden tarayıcıda görünür, ancak axios yanıtında görünmez?

— adanilev

4

@adanilev, tarayıcılar hata ayıklama amacıyla görmenize izin verir, ancak güvenlik nedeniyle API'lara erişmenizi önler. İstemcilerin sunuculardan güvenli kimlik bilgileri almasını önleyerek sunucunun bir istemcinin hangi erişime sahip olduğunu belirlemesine izin verir. TLDR: güvenlik amaçlı yapıldı

— 19:14

2

Bunu NGINX confg dosyamda var ... 'Access-Control-Expose-Headers' 'Authorization, X-Suggested-Filename, content-disposition' always; Hala sadece content-type: "application/pdf" gerçekten çekmeye ihtiyacım varcontent-disposition

— Yaşlı Adam Walter

17

Bu bana gerçekten yardımcı oldu, cevabınız için teşekkürler Nick Uraltsev.

Eğer kullanan müşterilerimiz nodejs ile cors :

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

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

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

Cevabı şu şekilde gönderiyorsanız res.header('Authorization', `Bearer ${token}`).send();

— cass
kaynak

1

Merak edenler için, burada da bir dizi geçirebilirsiniz: exposedHeaders: ['Authorization', 'X-Total-Count']

— Thiago Santana

11

Aynı sorunla karşı karşıyaydım. Y bunu "WebSecurity.java" dosyamda yaptı, cors yapılandırmasındaki setExposedHeaders yöntemiyle ilgili.

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

Umarım işe yarar.

— Daniel Azamar
kaynak

7

Asp.net çekirdeğinde aynı sorunla karşı karşıya Umarım bu yardımcı olur

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

— Chitova263
kaynak

1

SO hoş geldiniz! Yanıtınız doğru olabilir, ancak StackOverflow'da yalnızca kod yanıtını göndermek önerilmez. Lütfen cevabınızın orijinal soruyu nasıl çözdüğüne dair bir açıklama sağlamaya çalışın. daha iyi cevap yazmak

— nircraft

Teşekkür ederim, yardımcı oldu;)

— Florian

2

Resmi belgelere göre :

Sunucunun yanıt verdiği HTTP başlıklarını istiyorsanız bu yardımcı olabilir . Tüm üstbilgi adları alt kasalıdır ve parantez notasyonu kullanılarak erişilebilir. Örnek: response.headers['content-type']şunun gibi bir şey verir: başlıklar: {},

— Yogesh Bhatt
kaynak

1

SpringBoot2 için ekleyin

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

senin CORS filtre uygulama koduna, beyaz listede olduğu custom-header1ve custom-header2vb

— JackTheKnife
kaynak

0

django yardımı için

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

— VladimirDev
kaynak

0

Global CORS yapılandırmasını kullanmak istemiyorsanız Spring Boot 2 için, aşağıdakileri kullanarak @CrossOriginreklamı kullanarak yöntem veya sınıf / denetleyici düzeyine göre yapabilirsiniz.exposedHeaders öznitelikli .

Örneğin, yöntemlere üstbilgi eklemek authorizationiçin YourController:

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

— M. Dudek
kaynak