Axios mendapatkan akses ke bidang tajuk respons

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.

Bests.

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

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

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.

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

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: {},

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

untuk bantuan Django

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

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 {
    ...
}