在控制台中显示 \"SyntaxError: Unexpected token \'<\', \"<!DOCTYPE \"... is not valid JSON\"

Question

我正在使用 MERN 堆栈构建一个注册和登录页面，当我在 JWT 令牌身份验证后尝试从我的后端获取数据到我的主页时，我现在已经完成了完整的后端部分。

这是我的主页： 首页.js

import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

const Home = () => {

  const [userName, setUserName] = useState('');

  const navigate = useNavigate();

  const callHomePage = async () => {
    try {
      const res = await fetch('/', {
        method: 'GET',
        headers: {
          "Content-Type": "application/json"
        },
        credentials: "include"
      });

      const data = await res.json();
      setUserName(data.name)
      if(res.status != 200 ){
        const error = new Error(res.error);
        throw error;
      }
    }catch(err){
      console.log(err);
      navigate("/login");    
    }
  }
  
  useEffect(() => {
    callHomePage();
  }, []);

  return (
    <>
       <div className='home-page'>
           <div className='home-div'>
           <img src='#' alt='This profile img' />
            <h2 className='form-title'>
               Welcome {userName}
            </h2>
            <p className='dummy-para'>this is some dummy content which i have adding </p>
            </div>
       </div>
    </>
  )
}

export default Home

这是我来自后端的注册和登录身份验证文件

auth.js

const express = require("express");
const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");
const authenticate = require("../middleware/authenticate");


const router = express.Router();

require('../dbs/conn');
const User = require("../models/userSch");

router.get("/login", (req, res) =>{
    res.send("Welcome");
});

router.post('/register', async (req, res) => {

    const {name, email, password, cpassword} = req.body;
    if(!name || !email || !password || !cpassword){
        return res.status(422).json({ error: "Plz fill the field properly" })
    }

    try{
        const userExist = await User.findOne({ email: email });
        if(userExist){
            return res.status(422).json({ error: "Email already exists" });
        }else if(password != cpassword){
            return res.status(422).json({ error: "Password and Confim Password should be same" })
        }else{
            const user = new User({name, email, password, cpassword});
            const userRegister = await user.save();
            if(userRegister){
                res.status(201).json({ message: "User registered successfully" });
            }else{
                res.status(500).json({ error: "Failed to regiseter" });
            }
        }

    } catch (err){
        console.log(err);
    }
});


router.post('/login', async (req, res) => {

    try{
        let token;
        const {email, password} = req.body;

        if(!email || !password){
            return res.status(400).json({ error: "Plz fill all fields" })
        }
    
        const userLogin = await User.findOne({ email: email });

        if(userLogin){
            const isCheck = await bcrypt.compare(password, userLogin.password);

            token = await userLogin.generateAuthToken();
            console.log(token);

            res.cookie('jwtoken', token, {
                expires: new Date(Date.now()+ 25892000000),
                httpOnly: true
            });

            if(!isCheck){                
                return res.status(400).json({ error: "Invalid Credentials" })
            }else{
                res.status(200).json({ message: "User Signed in Successfully" });
            }
        }else{
            return res.status(400).json({ error: "Invalid Credentials" })
        }

    } catch (err){
        console.log(err);
    }
});

router.get("/", authenticate, (req, res) =>{
    res.send(req.rootUser);
});


module.exports = router;

这是我添加的用于验证令牌的文件：

认证.js

const jwt = require("jsonwebtoken");
const User = require("../models/userSch")
const authenticate = async (req, res, next) => {
    try{
        const token = req.cookies.jwtoken;
        const verifyToken = jwt.verify(token, process.env.SECRET_KEY);

        const rootUser = await User.findOne({_id: verifyToken._id, "tokens.token": token});

        if(!rootUser){
            throw new Error("User not found");
        }

        req.token = token;
        req.rootUser = rootUser;
        req.userID = rootUser._id;

        next();

    }catch(err){
        res.status(401).send("Unauthorised: No token provided");
        console.log(err);
    }
}

module.exports = authenticate

现在，当我登录时，它显示已成功登录但未进入主页，它仍保留在登录页面和控制台上，显示此错误：

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

这是我的控制台的图像：

console image

为了消除这个错误，我尝试删除并重新安装所有节点模块，还在我添加的 package.json 文件中：

"proxy": "http://localhost:4000",

Answer 1

您正在从获取中获取 application/textContent-Type，并且您正试图将其解析为 json，这是不可能的，因此您在控制台中遇到错误。