262

我正在使用 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"}

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

在此处输入图像描述

最好的。

4

14 回答 14

460

对于 CORS 请求，浏览器默认只能访问以下响应头：

  • 缓存控制
  • 内容-语言
  • 内容类型
  • 过期
  • 最后修改
  • 编译指示

如果您希望您的客户端应用程序能够访问其他标头，则需要在服务器上设置Access-Control-Expose-Headers标头：

Access-Control-Expose-Headers: Access-Token, Uid
于 2016-06-20T20:15:10.783 回答
28

这真的帮助了我，感谢 Nick Uraltsev 的回答。

对于那些使用带有 cors 的nodejs的人：

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

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

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

如果您以以下方式发送响应res.header('Authorization', `Bearer ${token}`).send();

于 2018-07-01T20:41:20.543 回答
16

我面临着同样的问题。我在我的 中做了这个WebSecurity.java，它是关于setExposedHeadersCORS 配置中的方法。

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

我希望它有效。

于 2018-10-22T01:40:16.257 回答
14

在 asp.net core 中遇到同样的问题希望这会有所帮助

public static class CorsConfig
{
    public static void AddCorsConfig(this IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder
                .WithExposedHeaders("X-Pagination")
                );
        });
    }
}
于 2019-04-16T18:41:31.930 回答
8

根据官方文档：

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

于 2020-04-09T06:38:49.253 回答
5

还有一个提示不是在这次谈话中。对于 asp.net core 3.1，首先添加您需要将其放在标题中的密钥，如下所示：

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

在您定义 cors 策略的地方（通常是 in 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")
于 2021-01-06T17:43:05.523 回答
4

由于 CORS 限制，无法在客户端访问自定义 HTTP 标头。您需要在服务器端添加 Access-Control-Expose-Headers 设置。

什么是访问控制公开标头？
请访问https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

默认情况下，仅公开这些 HTTP 标头：

  • 缓存控制
  • 内容-语言
  • 内容长度
  • 内容类型
  • 过期
  • 最后修改
  • 编译指示

对于自定义 HTTP 标头，您需要在响应标头中自定义 Access-Control-Expose-Headers。

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

例如，django-cors-headers您可以通过CORS_ALLOW_HEADERS设置添加要向浏览器公开的 HTTP 标头列表

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = list(default_headers) + [
    'my-custom-header',
]
于 2020-10-09T09:54:48.447 回答
2

对于 SpringBoot2 只需添加

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

将您的 CORS 过滤器实现代码列入白名单custom-header1等 custom-header2

于 2020-05-04T21:10:09.723 回答
1

django 帮助

CORS_EXPOSE_HEADERS = [
        'your header'
    ]
于 2020-03-31T17:22:04.460 回答
1

如果您将 Laravel 8 用于后端并正确配置了 CORS，请将此行添加到config/cors.php：

'exposed_headers' => ['Authorization'],

于 2020-10-23T19:44:36.717 回答
0

对于 Spring Boot 2，如果您不想使用全局 CORS 配置，则可以通过方法或类/控制器级别使用@CrossOrigin带有属性的注释来完成exposedHeaders。

例如，authorization为YourController方法添加标题：

@CrossOrigin(exposedHeaders = "authorization")
@RestController
public class YourController {
    ...
}
于 2020-07-20T20:46:09.583 回答
0

[扩展@vladimir 所说的]

如果您使用Django
并django-cors-headers允许/控制 CORS，则应在您的settings.py

CORS_EXPOSE_HEADERS = ['yourCustomHeader']
于 2021-07-21T18:33:39.253 回答
0

试试这样

            .then(res =>{
                console.log(res);
                console.log(res.headers['x-total-count']);
                setTotalRecords(res.headers['x-total-count']);
                setTableData(res.data);
            });
于 2021-09-23T04:38:46.320 回答
0

如果您使用没有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 标头。

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

MIDDLEWARE = [
    'myapp.middleware.CustomCorsMiddleware',
    ...
]
于 2022-02-22T16:58:36.020 回答