无法使用 axios 将 jwtToken 从反应客户端发送到节点/快递后端

Posted 2023-03-10

【中文标题】无法使用 axios 将 jwtToken 从反应客户端发送到节点/快递后端

【英文标题】：Can't send jwtToken from react client to node/express backend with axios

【发布时间】：2021-08-07 15:29:48

【问题描述】：

我即将学习使用 react、node 和 postgresql 进行全栈开发，并面临 jwttoken 授权问题。我需要你的支持。

每当我尝试使用 axios 将我的令牌从 react 发送到我的后端 API 时，我都会收到以下错误消息。

Failed to load resource: the server responded with a status of 403 (Forbidden)
createError.js:16 Uncaught (in promise) Error: Request failed with status code 403
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

如果我使用邮递员或删除授权，它工作得很好。

经过一些研究，我将 cors 用作中间件，但它仍然不起作用。

更多代码：

服务器端

authorization.js

import jwt from "jsonwebtoken";
require("dotenv").config();

module.exports = async (req, res, next) => 
  try 

    console.log("TEST");
    console.log(req.header("token"));

    // Get token from header
    const token = req.header("token"); 

    // Check if not token
    if (!token) 
      return res.status(403).json("Authorization denied");
    

    const payload = jwt.verify(token, process.env.jwtSecret);

    req.user = payload.user;

    next();
   catch (err) 
    return res.status(403).json("Token is not valid");
  
;

server.js

import express from "express";
const morgan = require("morgan");
import dotenv from "dotenv";
import cors from "cors";
dotenv.config();

const app = express();

// bring in routes
import hotelRoutes from "./routes/hotel";

// route middleware
app.use(cors());
app.use(morgan("dev"));
app.use(express.json());

app.use("/api/hotel", hotelRoutes);

const port = process.env.PORT || 8080;
app.listen(port, () =>
  console.log(`A node Js API is listening to port: $port`)
);

hotel.js // 路线

const express = require("express");
const  createhotel  = require("../controllers/hotel");
const  createhotelValidator  = require("../validator");
const authorization = require("../middleware/authorization");

const router = express.Router();
router.post("/", createhotelValidator, authorization, createhotel);

module.exports = router;

客户端

hotel.js

import axios from "axios";

export const createhotel = async (token, data) => 
  await axios.post(`$process.env.REACT_APP_API/hotel`, data, 
    headers: 
      Authorization: `Bearer $token`,
    ,
  );
;

【问题讨论】：

可以参考***.com/a/67556664/2822041

尝试标题名称“授权”，而不是“令牌”...const token = req.header("token");

【参考方案1】：

在您的 authorization.js 文件中将 token 更改为 Authorization

console.log(req.header("Authorization"));

// Get token from header
const token = req.header("Authorization");

【讨论】：

谢谢。这对我有用。但是我确实必须从我在初始帖子中发布的客户端 hotel.js 中删除“承载”前缀。什么是“承载者”以及我为什么需要它。提前致谢。

你可以用Bearer 分割字符串