使用 react 设置 axios 标头

Question

我正在尝试访问 http://localhost:8080/api/v1/postulant，但我无法在标头中设置访问令牌。我在 Postman 上做了同样的请求，它可以工作，所以这是 Axios 请求中的问题，我做错了什么？

let headers = {
  Authorization:
    "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjUsImlhdCI6MTYxOTUyNDE4NywiZXhwIjoxNjIwMTI4OTg3fQ.hSXARB-y7rClswYZ380HV5RW77qjYNt5FzW2NfDd8Vw",
  "Content-Type": "application/json",
};
axios.get("http://localhost:8080/api/v1/postulant", { headers });

在 api 我有这个代码来控制令牌：

function Auth(req, res, next) {
  console.log(req.headers);
  if (!req.headers["authorization"])
    res.status(400).json({ message: "token invalid" });
}

它为我的控制台日志 req.header 提供了： command prompt result

根据我的邮递员请求，我得到了这个结果：enter image description here

所以我没有找到我在 Axios 请求中提供的授权

Answer 1

您的{ headers } 看起来有点像解构，所以这可能是问题所在。试试

const options = {
  headers : {'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjUsImlhdCI6MTYxOTUyNDE4NywiZXhwIjoxNjIwMTI4OTg3fQ.hSXARB-y7rClswYZ380HV5RW77qjYNt5FzW2NfDd8Vw',
        'Content-Type': 'application/x-www-form-urlencoded',
    }
}

然后axios.get("http://localhost:8080/api/v1/postulant", options)

Answer 2

检查您的授权的大小写。

if(!req.headers['Authorization'])
    res.status(400).json({message : 'token invalid'});
}

Answer 3

HTTP 标头不区分大小写，如 this answer 中所述。但是，节点对象键是区分大小写的，因此代码本身中的括号可能存在​​问题

所以这段代码

function Auth(req,res,next){
  console.log(req.headers)
}
if(!req.headers['authorization'])
    res.status(400).json({message : 'token invalide'});
}

实际上是一个函数，它有一条指令是console.log(req.headers)

然后

if(!req.headers['authorization'])
    res.status(400).json({message : 'token invalide'});
}

它不在函数范围内，因此它无法访问req.headers 参数。 代码如下所示：

function Auth(req, res, next) {
  console.log(req.headers);
  if (!req.headers["authorization"]) {
    res.status(400).json({ message: "token invalid" });
  }
}

Answer 4

您好，我终于找到了解决方案，这是一个 cors 问题。

所以我删除了这部分代码

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "DELETE, GET, OPTIONS, PATCH, POST, PUT")
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,Authorization");
next();
});

然后添加它

const cors= require('cors')
app.use(cors())