前后端分离 SpringSecurity在拦截器中设置responseHeader前端无法获取

最新推荐文章于 2023-10-13 16:21:01 发布

小叶沉迷学习

最新推荐文章于 2023-10-13 16:21:01 发布

阅读量1.1k

点赞数

文章标签：前端 spring boot java javascript vue.js

本文链接：https://blog.youkuaiyun.com/YWwXxx/article/details/128699824

版权

在前后端分离的项目中，由于跨域限制，默认只能获取到五个HTTP响应头。要访问其他自定义头部，需在服务器端设置Access-Control-Expose-Headers。错误示例展示了未设置该头部导致前端无法获取ttt头部，而正确示例中添加了此设置，使得前端可以正常打印出该头部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因分析

由于是前后端分离项目，请求涉及跨域

在前后端分离跨域的情况下，默认reponse header只能取到以下

Content-Language
Content-Type
Expires
Last-Modified
Pragma

5个默认值,要想取得其他的字段需要在服务器端设置Access-Control-Expose-Headers 配置前端想要获取的header

代码示例

错误示例

后端

@Override
    protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
        httpServletResponse.addHeader("ttt", "Try it out");
        filterChain.doFilter(httpServletRequest, httpServletResponse);
    }

前端

Axios.interceptors.response.use(res => {
  console.log(res)
   return res.data;
}, error => {
  Message({
    message: error.response.data.message,
    type: 'error'
  })
  return Promise.reject(error.response);
})

浏览器打印结果

正确示例

后端

@Override
    protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
        httpServletResponse.addHeader("ttt", "Try it out");
        httpServletResponse.setHeader("Access-Control-Expose-Headers", "ttt");
        filterChain.doFilter(httpServletRequest, httpServletResponse);
    }

浏览器打印结果