Question

在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开发工具中，我们可以清楚地看到令牌

如何解决这个问题？

Answer 1

在chrome DevTools或其他工具中签入请求标头。这里是否显示授权？

BE方面是什么，也许您应该检查一下？

Answer 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'
                    }
                })

在后端拆分授权字符串时

如何在axios中附加JSON Web令牌

2 个答案: