为什么拿不到请求头的token?

token在请求头里是有的

image.png
网上搜了搜常见的解决方式,后端也开了权限

    @PostMapping("/login")
    public Result login(@Validated @RequestBody JSONObject jsonObject, HttpServletResponse response) {
        User us = jsonObject.toJavaObject(User.class);
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("username",us.getUsername()).eq("password",us.getPassword());
        User user = userService.getOne(queryWrapper);
        if (user==null)
            return Result.fail("用户名或密码错误!");
//        if(!user.getPassword().equals(SecureUtil.md5(loginDto.getPassword()))) {
//            return Result.fail("密码错误!");
//        }
        String token = TokenUtil.produceToken(user);
        response.setHeader("Authorization", token);
        response.setHeader("Access-Control-Expose-Headers", "Authorization");
        // 用户可以另一个接口
        System.out.println(user.getUserId());
//        return Result.succ(MapUtil.builder().put("user_id",user.getUser_id())
//        .put("username",user.getUsername()).put("password",user.getPassword()).put("user_img",user.getImg()).map());
        return Result.succ(user);
    }

前端拿的代码

 login() {
        // 发起请求后this会丢失,先保存
        var that=this
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            // 向后端发起请求,提交数据
            this.$axios.post('http://localhost:9090/login',this.submitForm
            ).then(function (response){
              //查询到用户跳转个人中心界面
              if (response.data.data!==""&&response.data.data!=null){
                alert("登陆成功!")
                const token=response.headers["Authorization"]
                that.$store.commit('SET_TOKEN',token)
                console.log(token)
                that.$store.commit('SET_USERINFO',response.data.data)
                console.log(that.$store.getters.getUser.userId)
                console.log(that.$store.getters.getUser.username)
                that.$router.push({
                  path:'/blogs'
                })
              }

image.png

控制台打印undefined!!

阅读 4.9k
1 个回答

你配置的没错,不过 axios 会把 header 转为小写,比如 Content-Type -> content-type,你的 Authorization 会被转为 authorization……

虽然 w3c 标准里 header 是不区分大小写的,但 axios 还是“热情的”帮你转换了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题