Axios 可以访问响应 header 字段

Axios get access to response header fields

我正在使用 React 和 Redux 构建一个前端应用程序,我正在使用 axios 来执行我的请求。我想访问响应 header 中的所有字段。在我的浏览器中,我可以检查 header 并且我可以看到我需要的所有字段都存在(例如令牌、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"}

这是我的浏览器网络选项卡,您可以看到所有其他字段都存在。

最佳。

对于 CORS 请求,浏览器默认只能访问以下响应 header:

  • Cache-Control
  • Content-Language
  • Content-Type
  • 过期
  • Last-Modified
  • 编译指示

如果您希望您的客户端应用能够访问其他 header,您需要在服务器上设置 Access-Control-Expose-Headers header:

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

这对我很有帮助,感谢 Nick Uraltsev 的回答。

对于那些使用 nodejscors 的人:

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

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

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

如果您以 res.header('Authorization', `Bearer ${token}`).send();

的方式发送响应

我遇到了同样的问题。我在我的 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;
}

希望有用。

在 asp.net 核心中遇到同样的问题 希望这有帮助

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

求 django 帮助

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

根据official docs

如果您想要服务器响应的 HTTP header,这可能会有所帮助。所有 header 名称都是小写的,可以使用括号表示法访问。示例:response.headers['content-type'] 将给出如下内容:headers: {},

对于 SpringBoot2 只需添加

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

将您的 CORS 过滤器实现代码加入白名单 custom-header1custom-header2

对于 Spring Boot 2,如果您不想使用全局 CORS 配置,您可以通过方法或 class/controller 级别使用 @CrossOrigin 注释和 exposedHeaders 属性.

例如,要为 YourController 方法添加 header authorization

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

由于 CORS 限制,无法在 client-side 上访问自定义 HTTP headers。您需要在 server-side.

上添加 Access-Control-Expose-Headers 设置

什么是Access-Control-Expose-Headers?
请前往https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

默认情况下只有这些 HTTP headers 公开:

  • Cache-Control
  • Content-Language
  • Content-Length
  • Content-Type
  • 过期
  • Last-Modified
  • 杂注

对于自定义 HTTP headers,您需要自定义 Access-Control-Expose-Headers 响应 headers。

如果您在服务器端使用 Django,您可以使用 django-cors-headers (https://pypi.org/project/django-cors-headers/) 进行 CORS 设置管理。

例如,对于 django-cors-headers,您可以通过 CORS_ALLOW_HEADERS 设置

添加要向浏览器公开的 HTTP headers 列表
from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = list(default_headers) + [
    'my-custom-header',
]

如果您在正确配置 CORS 的 back-end 端使用 Laravel 8,请将此行添加到 config/cors.php:

'exposed_headers' => ['Authorization'],

还有一个暗示不在此对话中。 asp.net 核心 3.1 首先添加您需要将其放入 header 的密钥,如下所示:

Response.Headers.Add("your-key-to-use-it-axios", "your-value");

在您定义 cors 策略的地方(通常在 Startup.cs 中),您应该像这样将此密钥添加到 WithExposedHeaders。

          services.AddCors(options =>
        {
        options.AddPolicy("CorsPolicy",
            builder => builder
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowAnyOrigin()
                .WithExposedHeaders("your-key-to-use-it-axios"));
        });
    }

您可以在此处添加所有密钥。 现在在您的客户端,您可以使用响应结果轻松访问 your-key-to-use-it-axios。

          localStorage.setItem("your-key", response.headers["your-key-to-use-it-axios"]);

你可以在所有的客户端使用它,像这样访问它:

const jwt = localStorage.getItem("your-key")

[扩展@vladimir 所说的内容]

如果您使用的是 Django
django-cors-headers 到 allow/control CORS, 您应该在 settings.py

中设置以下内容
CORS_EXPOSE_HEADERS = ['yourCustomHeader']

这样试试

            .then(res =>{
                console.log(res);
                console.log(res.headers['x-total-count']);
                setTotalRecords(res.headers['x-total-count']);
                setTableData(res.data);
            });

如果您使用的是没有 django-cors-headers 的 Django,您可以编写自定义中间件。

class CustomCorsMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response['Access-Control-Expose-Headers'] = 'MY-HEADER, ANOTHER-HEADER'

        return response

您还可以在这里设置其他CORS头。

那么您应该通过将中间件插入项目 settings.py 文件中 MIDDLEWARE 列表的开头来注册中间件。

MIDDLEWARE = [
    'myapp.middleware.CustomCorsMiddleware',
    ...
]