前后端分离项目，后端 Springboot 获取不到前端 axios 传递的 header 是怎么回事儿？

[lixyz]

一直做安卓开发，趁着疫情失业，就想着更新一下技术栈，就学了一下 Springboot 和 Vue ，顺便写了个页面，然后在 Android WebView 上加载。

项目后端是 Springboot 写的

前端是 Vue2

前端使用 axios 发送 get 请求：

axios.get('https://www.xxx.com/getXXX?a=1&b=2&c=3', {
        headers: {
          "Token": "xxxxxxxxx"
        }
      }).then((res) => {
        ...
      })

后端 Springboot Controller 是这样写的：

    @GetMapping("/getXXX")
    public Result getXXX(HttpServletRequest request, @RequestParam("a") int a, @RequestParam("b") int b, @RequestParam("c") int c) {
        String userId = request.getHeader("Token");
        if (userId == null) {
            return new Result(false, "未登录操作", null, null);
        } else {
            return service.getPlans(userId, year, month, day);
        }
    }

涉及到跨域问题，在 Controller 上加了 @CrossOrigin 注解解决了。

整个过程在浏览器调试的时候是正常的，但是将 Vue 项目打包上传到服务器中，使用 Android webview 来访问的时候，却提示“未登录操作”，也就意味着 request.getHeader("Token") 为 null

我遍历了下 Springboot 接受到的 Header ，只有：

user-agent
host
connection
accept-encoding

也就是说，webview 下

        headers: {
          "Token": "xxxxxxxxx"
        }

是无效的

有人遇到过这样的状况吗？该怎么解决呀

[chnwillliu]

抓个包，看下是不是有这个请求头，可能是 webview 层拦截了。

[chnwillliu]

哦，这个是你自己的 webview 对吧，那抓包看下 cors preflight 请求。因为你的 Token 是自定义 header 所以这个 get 就变成了非简单请求, 服务器对 preflight 要响应 access-control-allow-headers 允许你这个 header.

[Removable]

@chnwillliu #2 估计就是这个原因

[lixyz]

@chnwillliu @Removable 感谢解答。。。
今天找了一天原因，又是抓包又是重写的
最后发现，因为我是双向认证，所以重写了 webview 的 CLIENT ，然后在 client 中过滤掉了添加的 Header 。。。

[yumobs]

你就不能看看 F12 审查元素，看看请求带了 Token 了吗？ 带了就是后端问题，没带就前端问题。