使用 react 设置 axios 标头

Posted 2023-03-04

【中文标题】使用 react 设置 axios 标头

【英文标题】：Set axios header with react

【发布时间】：2021-07-20 21:09:18

【问题描述】：

我正在尝试访问 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 请求中提供的授权

【问题讨论】：

Content-Type 在两个请求中都不同——“application/x-www-form-urlencoded”与“application/json”

和 postmann 一起工作

【参考方案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)

【讨论】：

他们使用的语法是正确的—— header 是 header: header 的快捷方式

啊，我明白了。谢谢！

【参考方案2】：

检查您的授权的大小写。

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

【参考方案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" );
  

【参考方案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())

【讨论】：

所以问题出在网络框架的使用上（我猜是 Express？），而不是请求本身？如果是这样，您可以使用 Express.js 或相关内容标记您的问题，以便其他人可以找到它