Axios可以访问响应报头字段

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

这里我的浏览器网络选项卡，正如你可以看到的所有其他领域都存在。

enter image description here

最好成绩。

231972 次浏览
小开
最佳答案

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

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

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

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

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

对于那些使用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头。所有标头名称都是小写的，并且可以使用括号符号访问。示例:response.headers['content-type']将给出类似于:headers: {}，

小开

对于SpringBoot2，只需添加

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

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

小开

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

例如，为YourController方法添加头文件authorization:

@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' => ['Authorization'],

小开
在这次谈话中还有一个暗示。 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")
小开

[扩展@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没有django-cors-headers，你可以编写自定义中间件。

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',
...
]

提交答案