Axios เข้าถึงช่องส่วนหัวการตอบกลับ


160

ฉันกำลังสร้างแอปส่วนหน้าด้วย React และ Redux และฉันใช้axiosเพื่อดำเนินการตามคำขอของฉัน ฉันต้องการเข้าถึงฟิลด์ทั้งหมดในส่วนหัวของการตอบกลับ ในเบราว์เซอร์ของฉันฉันสามารถตรวจสอบส่วนหัวและฉันเห็นว่าทุกฟิลด์ที่ฉันต้องการมีอยู่ (เช่นโทเค็น, uid, ฯลฯ ... ) แต่เมื่อฉันโทร

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


หากคุณพิมพ์ axios.defaults คุณจะได้อะไรจากสิ่งที่คุณขาดไปไหม ส่วนหัวบางส่วนได้รับการกำหนดค่าที่ระดับนั้นไม่ใช่ที่คำขอแต่ละรายการ (ดูgithub.com/mzabriskie/axios#global-axios-defaults )
Ben Hare

2
ไม่ใช่axios.defaults.headersเพื่อกำหนดค่าส่วนหัว REQUEST ใช่ไหม ฉันจำเป็นต้องเข้าถึง RESPONSE @BenHare
TWONEKSONE

BTW สิ่งที่คุณเรียกว่าคำขอไม่ใช่คำขอ มันเป็นสัญญาสำหรับการตอบสนองของคุณ คำขอของคุณคือสิ่งที่คุณส่งผ่านไปยังวิธีการโพสต์ () เป็นข้อโต้แย้ง
Daniel

คำตอบ:


311

ในกรณีที่มีการร้องขอ CORS เบราว์เซอร์สามารถเข้าถึงส่วนหัวการตอบสนองต่อไปนี้ตามค่าเริ่มต้น:

  • Cache-Control
  • เนื้อหาภาษา
  • ชนิดของเนื้อหา
  • วันที่หมดอายุ
  • Last-Modified
  • pragma

หากคุณต้องการให้แอปไคลเอนต์ของคุณสามารถเข้าถึงส่วนหัวอื่นคุณต้องตั้งค่าส่วนหัวAccess-Control-Expose-Headersบนเซิร์ฟเวอร์:

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

ไม่ดีฉันลืมเปิดเผยฟิลด์นั้น
TWONEKSONE

27
หากคุณกำลังใช้ Rails กับ Rack-Cors คุณต้องตั้งค่าexpose: ['Access-Token', 'Uid']ที่จุดเริ่มต้นเช่น:resource '*', :headers => :any, :methods => [:get, :post, :put, :patch, :delete, :options, :head], expose: ['Access-Token', 'Uid']
CWitty

3
ฉันไม่เข้าใจ หากพวกเขาไม่ได้สัมผัสทำไมส่วนหัวเพิ่มเติมสามารถมองเห็นได้ในเบราว์เซอร์ แต่ไม่ได้อยู่ในการตอบสนอง axios?
adanilev

4
@adanilev, เบราว์เซอร์ช่วยให้คุณเห็นพวกเขาสำหรับวัตถุประสงค์ในการตรวจแก้จุดบกพร่อง แต่ป้องกันไม่ให้คุณเข้าถึงพวกเขาผ่าน APIs ด้วยเหตุผลด้านความปลอดภัย มันป้องกันไม่ให้ลูกค้ารับข้อมูลประจำตัวที่ปลอดภัยจากเซิร์ฟเวอร์ทำให้เซิร์ฟเวอร์สามารถกำหนดได้ว่าลูกค้าคนใดเข้าถึงได้ TLDR: มันทำกับวัตถุประสงค์เพื่อความปลอดภัย
erfling

2
ฉันมีสิ่งนี้ในไฟล์แนบ NGINX ของฉัน ... 'Access-Control-Expose-Headers' 'Authorization, X-Suggested-Filename, content-disposition' always; ยังมี แต่content-type: "application/pdf" ต้องเห็นจริงๆต้องดึงcontent-disposition
Old Man Walter

17

สิ่งนี้ช่วยฉันได้จริงๆขอบคุณ Nick Uraltsev สำหรับคำตอบของคุณ

สำหรับผู้ที่คุณใช้nodejsกับcors :

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

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

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

ในกรณีที่คุณกำลังส่งการตอบสนองในทาง res.header('Authorization', `Bearer ${token}`).send();


1
สำหรับผู้ที่สงสัยคุณสามารถส่งผ่านอาร์เรย์ได้ที่นี่เช่นกัน: ผู้เปิดเผย: ['การอนุญาต', 'X-Total-Count']
Thiago Santana

11

ฉันกำลังเผชิญกับปัญหาเดียวกัน Y ทำสิ่งนี้ใน "WebSecurity.java" ของฉันมันเกี่ยวกับเมธอด setExposedHeaders ในการกำหนดค่า 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;
}

ฉันหวังว่ามันจะได้ผล


7

ประสบปัญหาเดียวกันในแกน asp.net หวังว่านี่จะช่วยได้

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

1
ยินดีต้อนรับสู่ SO! คำตอบของคุณอาจถูกต้อง แต่ที่ StackOverflow มันเป็นกำลังใจให้โพสต์รหัสคำตอบเท่านั้น โปรดพยายามอธิบายคำตอบของคุณว่าจะแก้คำถามเดิมอย่างไร โปรดอ่านวิธีการเขียนคำตอบที่ดีกว่า
nircraft

ขอบคุณมันช่วยได้)
ฟลอเรียน

2

ตามเอกสารอย่างเป็นทางการ :

นี้อาจช่วยให้ถ้าคุณต้องการส่วนหัว HTTP ว่าเซิร์ฟเวอร์ตอบโต้ด้วย ชื่อส่วนหัวทั้งหมดใส่ซองที่ต่ำกว่าและสามารถเข้าถึงได้โดยใช้เครื่องหมายวงเล็บ ตัวอย่าง: response.headers['content-type']จะให้สิ่งที่ชอบ: ส่วนหัว: {},


1

สำหรับ SpringBoot2 เพียงเพิ่ม

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

ในโค้ดการใช้งานตัวกรอง CORS ของคุณเพื่อรับรายการที่ปลอดภัยcustom-header1และ custom-header2อื่น ๆ



0

สำหรับ Spring Boot 2 หากคุณไม่ต้องการใช้การตั้งค่า CORS ทั่วโลกคุณสามารถทำได้โดยใช้วิธีการหรือระดับ / ตัวควบคุมระดับโดยใช้@CrossOriginadnotation กับexposedHeaders atribute

ตัวอย่างเช่นหากต้องการเพิ่มส่วนหัวauthorizationสำหรับYourControllerวิธีการ:

@CrossOrigin(exposedHeaders = "authorization")
@RestController
public class YourController {
    ...
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.