Axios可以访问响应头字段

Question

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

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

最好成绩.

Answer 1

在CORS请求的情况下,浏览器默认只能访问以下响应头:

• 缓存控制
• 内容语言
• 内容类型
• 过期
• 最后修改
• 附注

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

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

Answer 2

我面临同样的问题。我在我WebSecurity.java的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;
}

我希望它有效。

Answer 3

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

Answer 4

这真的对我有所帮助，谢谢Nick Uraltsev的回答。

对于那些你使用的NodeJS与CORS：

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

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

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

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

Answer 5

根据官方文档：

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

Answer 6

在 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 。检查网络选项卡中的响应标头是否包含带有您的自定义名称的标头。

Answer 7

这次谈话中还有一个暗示并非如此。对于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"));
        });
    }

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

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

您可以在所有客户端中使用它后通过如下方式访问它：

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

Answer 8

由于 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添加要向浏览器公开的 HTTP 标头列表CORS_ALLOW_HEADERS

from corsheaders.defaults import default_headers

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