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

cache - control 内容语言 内容类型 到期 last - modified 编译指示

如果你想让你的客户端应用能够访问其他头文件，你需要在服务器上设置access - control - expose - headers头文件:

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

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

对于那些使用cors的nodejs的人:

...
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 core中也遇到了同样的问题 希望这能有所帮助

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

对于django help

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

根据官方文件:

如果您需要服务器响应的HTTP报头，这可能会有所帮助。所有标头名称都是小写的，并且可以使用括号符号访问。例如:响应。Headers ['content-type']将给出如下内容:

对于SpringBoot2，只需添加

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

到你的CORS过滤器实现代码有白名单custom-header1和custom-header2等

对于Spring Boot 2，如果你不想使用全局CORS配置，你可以通过方法或类/控制器级别使用@CrossOrigin声明和exposedHeaders属性来实现。

例如，为YourController方法添加头授权:

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

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

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

默认情况下，只有这些HTTP报头是公开的:

cache - control 内容语言 内容长度 内容类型 到期 last - modified 编译指示

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

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

例如，使用django-cors-headers，你可以添加一个HTTP头列表，通过CORS_ALLOW_HEADERS设置向浏览器公开

from corsheaders.defaults import default_headers

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

如果你在后端使用Laravel 8，正确配置CORS，添加这一行到config/ CORS .php:

'exposed_headers' =>['授权']，

在这次谈话中还有一个暗示。 asp.net core 3.1 首先添加一个键，你需要把它放在头部，就像这样:

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

你可以在这里添加所有的键。 现在，在您的客户端，您可以通过使用响应结果轻松地访问“使用它的密钥”。

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

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

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

[扩展@vladimir所说的话]

如果你使用的是Django 和django-cors-headers允许/控制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 = [
    'myapp.middleware.CustomCorsMiddleware',
    ...
]

在axios CORS请求中，默认情况下浏览器只能访问少数报头。

但是如果你需要从响应中访问一个自定义的头，你必须从你的后端服务器用access - control - expose - headers发送响应。

Hare是Nodejs后端和Reactjs前端的一个例子:

res.header('Access-Control-Expose-Headers', 'x-xsrf-token');

return res.header("x-xsrf-token", token).status(200)
           .send({
                id: user.id,
                email: user.email,
            });

res.header(“Access-Control-Expose-Headers”、“x-xsrf-token”);

对于这一行，我可以记录我的自定义标题

axios.post("/login", {
            email: emailInput.current.value,
            password: passwordInput.current.value,
        })
        .then(function (response) {

            console.log(response.headers["x-xsrf-token"]);

        });

在你的响应中没有Access-Control-Expose-Headers，你将在控制台日志中得到undefine。检查您的响应头在网络选项卡，它包含与您的自定义名称的头。