如何在 axios 中附加 JSON Web 令牌答案

【问题标题】：How to attach a JSON web token in axios如何在 axios 中附加 JSON Web 令牌
【发布时间】：2020-05-13 21:49:51
【问题描述】：

在 React 中，我发送如下数据和标头：

 axios.post("http://localhost:3000/stockdata",{
                    // data
                    },{headers: {
                        'authorization': "Bearer "+LocalStorage.get('token'),
                        'Accept' : 'application/json',
                        'Content-Type': 'application/json'
                    }
                })

在 Index.js 中 //需要所有模块

    var stockDataRouter = require('./Routers/stockDataRouter')
    app.use('/stockdata', authenticateToken, stockDataRouter)

    app.route('/login')
    .options(cors.corsWithOptions, (req,res)=>{ res.sendStatus(200)})
    .post(cors.cors, (req, res, next) => {

    console.log(req.header)
    if(req.body.username==='admin' && req.body.password==='password'){
        const user = {
            username: req.body.username,
        }
        jwt.sign({user:user}, 'secretkey',(err, token)=>{
        res.json({
                token: token
            })      
        })
          }
          else{
              res.sendStatus(403)
          }
      })

    function authenticateToken(req,res,next){
        const bearerHeader = req.headers['authorization']
        console.log(req.headers)
        if(typeof bearerHeader !== 'undefined'){
            const bearer = bearerHeader.split(' ');
            const bearerToken = bearer[1];
            req.token = bearerToken;
            next();
        }
        else{
            console.log('hihihi')
            res.sendStatus(403);
        }
    }

如果请求有令牌，那么它不会进入 else 部分，我可以访问 stockdata 端点。但即使我正确地传递了令牌，正如您在 chrome 开发工具中看到的那样。为什么它没有反映在后端。

req.headers 没有授权。

在chrome dev tools中我们可以清楚的看到Token

如何解决？

【问题讨论】：

检查来自LocalStorage.get('token')的返回值 - 它可能未定义并被代理删除。
很可能LocalStorage 没有token
LocalStorage.get('token') 正在返回一个令牌。
您正在拆分 bearerHeader，这意味着您需要像 'authorization': "Bearer " + LocalStorage.get('token'), 一样从客户端传递它
即使我这样做了，我也无法在我的后端收到它。如果我这样做 console.log(req.headers) 我无法在我的后端获得该令牌

标签： reactjs axios jwt

【解决方案1】：

在 chrome DevTools 等中检查请求标头。authorization 是否显示在那里？

BE 方面是什么，你应该检查一下吗？

【讨论】：

在哪里可以在 chrome 中检查这个？请帮帮我
按Ctrl+shift+i 打开开发者工具。然后进入Network Tab，查看请求是否被授权记录。也可以在上下文菜单（右键菜单）中点击Inspect打开开发者工具
如您所见，授权就在那里。检查 BE 侧。你用什么服务器？您在控制台中登录的值是什么？
抱歉，BE 方是什么？
他的意思是后端

【解决方案2】：

您需要将客户端代码更改为

//Try like this
axios.interceptors.request.use(function (config) {
    config.headers.Authorization =  "Bearer " + LocalStorage.get('token');
    return config;
});

axios.post("http://localhost:3000/post",{
                    // data
                    },{headers: {
                       // 'authorization': "Bearer " + LocalStorage.get('token'),
                        'Accept' : 'application/json',
                        'Content-Type': 'application/json'
                    }
                })

当您在后端拆分授权字符串时

【讨论】：

即使我这样做了，我也无法在我的后端收到它。如果我这样做 console.log(req.headers) 我无法在我的后端获得该令牌
你能展示整个中间件吗？身份验证中间件
看看我的帖子，里面有 index.js 文件。
你能试试{ Authorization: "Bearer " + LocalStorage.get('token') }吗？我可以在您的 access-control-request-headers 标头中看到 authorizat。请注意，我没有将 Authorization 包含在引号内
在我像你提到的那样进行更改后，我得到了 'access-control-request-headers': 'authorization,content-type',