Axios mendapatkan akses ke bidang tajuk respons


160

Saya sedang membangun aplikasi frontend dengan React dan Redux dan saya menggunakan aksioma untuk melakukan permintaan saya. Saya ingin mendapatkan akses ke semua bidang di tajuk tanggapan. Di browser saya, saya dapat memeriksa header dan saya dapat melihat bahwa semua bidang yang saya butuhkan ada (seperti token, uid, dll ...), tetapi ketika saya menelepon

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

Saya hanya

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

Di sini tab jaringan browser saya, seperti yang Anda lihat semua kolom lainnya ada.

masukkan deskripsi gambar di sini

Bests.


Jika Anda mencetak axios.defaults.headers apakah itu memberi Anda salah satu dari yang Anda lewatkan? Beberapa tajuk dikonfigurasikan pada level itu, tidak pada setiap permintaan (lihat github.com/mzabriskie/axios#global-axios-defaults )
Ben Hare

2
Bukankah itu axios.defaults.headersuntuk mengkonfigurasi par header header REQUEST? Saya perlu mengakses RESPONS. @BenHare
TWONEKSONE

BTW, apa yang Anda sebut permintaan, bukan permintaan. Ini janji atas tanggapan Anda. Permintaan Anda adalah apa yang Anda berikan kepada metode post () sebagai argumen.
Daniel

Jawaban:


311

Dalam hal permintaan CORS, browser hanya dapat mengakses header respons berikut secara default:

  • Kontrol Cache
  • Konten-Bahasa
  • Jenis konten
  • Kedaluwarsa
  • Terakhir diubah
  • Pragma

Jika Anda ingin aplikasi klien Anda dapat mengakses header lain, Anda perlu mengatur header Access-Control-Expose-Headers di server:

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

Sayangnya saya lupa mengekspos bidang itu.
TWONEKSONE

27
Jika Anda menggunakan Rails dengan Rack-Cors, Anda perlu mengatur expose: ['Access-Token', 'Uid']keasliannya seperti:resource '*', :headers => :any, :methods => [:get, :post, :put, :patch, :delete, :options, :head], expose: ['Access-Token', 'Uid']
CWitty

3
Saya tidak mengerti. Jika tidak terbuka, mengapa header tambahan terlihat di browser tetapi tidak di respon aksioma?
adanilev

4
@adanilev, browser memungkinkan Anda melihatnya untuk keperluan debugging, tetapi mencegah Anda mengaksesnya melalui API untuk alasan keamanan. Ini mencegah klien dari mendapatkan kredensial aman dari server, memungkinkan server untuk menentukan akses apa yang dimiliki klien. TLDR: ini dilakukan dengan sengaja untuk keamanan
erfling

2
Saya punya ini di file confg NGINX saya ... 'Access-Control-Expose-Headers' 'Authorization, X-Suggested-Filename, content-disposition' always; Masih hanya melihat content-type: "application/pdf" benar-benar perlu menarikcontent-disposition
Pak Tua Walter

17

Ini sangat membantu saya, terima kasih Nick Uraltsev untuk jawaban Anda.

Bagi anda menggunakan nodejs dengan kor :

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

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

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

Jika Anda mengirim respons dengan cara res.header('Authorization', `Bearer ${token}`).send();


1
Bagi mereka yang bertanya-tanya, Anda dapat melewatkan array di sini juga: exposedHeaders: ['Otorisasi', 'X-Total-Count']
Thiago Santana

11

Saya menghadapi masalah yang sama. Y melakukan ini di "WebSecurity.java" saya, ini tentang metode setExposedHeaders dalam konfigurasi cors.

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

Saya harap ini berhasil.


7

Menghadapi masalah yang sama di asp.net core Semoga ini bisa membantu

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

1
Selamat datang di SO! Jawaban Anda mungkin benar tetapi di StackOverflow, tidak disarankan untuk mengirim jawaban hanya kode. Cobalah berikan penjelasan tentang bagaimana jawaban Anda memecahkan pertanyaan awal. baca ini tentang cara Menulis Jawaban yang Lebih Baik
nircraft

Terima kasih, itu membantu;)
Florian

2

Menurut dokumen resmi :

Ini dapat membantu jika Anda ingin tajuk HTTP yang ditanggapi oleh server . Semua nama header berukuran lebih rendah dan dapat diakses menggunakan notasi braket. Contoh: response.headers['content-type']akan memberikan sesuatu seperti: header: {},


1

Untuk SpringBoot2 cukup tambahkan

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

ke kode implementasi filter CORS Anda untuk masuk daftar putih custom-header1dan custom-header2sebagainya



0

Untuk Spring Boot 2 jika Anda tidak ingin menggunakan konfigurasi CORS global, Anda dapat melakukannya dengan metode atau tingkat kelas / pengontrol menggunakan @CrossOriginadnotation with atribute exposedHeaders.

Misalnya, untuk menambahkan header authorizationuntuk YourControllermetode:

@CrossOrigin(exposedHeaders = "authorization")
@RestController
public class YourController {
    ...
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.