[英]Showing "SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON" in console
我正在使用 MERN 堆棧構建一個注冊和登錄頁面,當我嘗試在 JWT 令牌身份驗證后嘗試從我的后端獲取數據到我的主頁時,我現在已經完成了完整的后端部分。
這是我的主頁:Home.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
這是我的控制台的圖像:
為了消除此錯誤,我嘗試刪除並重新安裝所有節點模塊,並且還在我添加的 package.json 文件中:
"proxy": "http://localhost:4000",
您正在從獲取中獲取application/text
Content-Type
,並且您正在嘗試將其解析為 json,這是不可能的,因此您在控制台中遇到錯誤。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.