javascript - 获取 javascript 文件时遇到错误。“加载资源失败：401（未经授权）”

Question

我正在尝试添加一个错误，但它显示此错误 无法加载资源：服务器响应状态为 401（未授权） SyntaxError: Unexpected token < in JSON at position 0

我怎么解决这个问题

这是用于创建错误的代码jsx代码

/* eslint-disable no-unused-vars */
/* eslint-disable eqeqeq */
/* eslint-disable import/no-anonymous-default-export */
import React,{useContext, useState} from 'react'
import './bugForm.css'
import BugModel from '../../../Models/bugModel'
import {useHistory} from 'react-router-dom'
import {userContext} from '../../../App'


export default(props) => {
    // eslint-disable-next-line no-unused-vars
    const [bugData, setbugData] = useContext(userContext)
    //const [bugObject, setBugObject] = useState(new BugModel(props.bug))
    let history = useHistory();
    let { from } = { from: { pathname: '/dashboard' } };

    const [bugObject, setBugObject] = useState({
        name: '',
        details:'',
        steps: '',
        priority: '',
        assigned: '',
        creator: '',
        version: '',
        time: '',
    })
    

    function handleChange(e){
        setBugObject({
            ...bugObject,
            [e.target.name]:e.target.value
        });
    };

        const handleSubmit = (e) => {
        e.preventDefault();
        const userData = {
            name: bugObject.name,
            details: bugObject.details,
            steps: bugObject.steps,
            priority: bugObject.priority,
            assigned: bugObject.assigned,
            version: bugObject.version,
            time: bugObject.time,
        };
    
        fetch('http://localhost:8000/api/bug/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${localStorage.getItem('token')}`
            },
            body: JSON.stringify(userData),
        })
            .then((res) => res.json())
            .then((data) => {
                setbugData({
                    token: data.token,
                    name: data.name,
                    details: data.details,
                    steps: data.steps,
                    priority: data.priority,
                    assigned: data.assigned,
                    creator: data.creator,
                    version: data.version,
                    time: data.timestamps,
                    isSignedIn: true,
                })
                history.push(from)
            })
            .catch((err) => console.log(err))
    }


    return(
        <div  className='bug-create'>
            {props.title == "Edit Bug" && <button className='close-btn' onClick={props.close}>Close</button>}
            <h1>{props.title}</h1>

            <form onSubmit={handleSubmit}>
                <label>Name:</label>
                <input name='name' placeholder='Bug Name' required onChange={handleChange} value={bugObject.name}></input>

                <label>Details:</label>
                <textarea name='details' placeholder='Discription of Bug' required onChange={handleChange} value={bugObject.details}></textarea>

                <label>Steps:</label>
                <textarea name='steps' placeholder='Steps to recreate the Bug' required onChange={handleChange} value={bugObject.steps}></textarea>

                <label>Priority:</label>
                <select name='priority' required onChange={handleChange} value={bugObject.priority}>
                    <option value ='1'>High</option>
                    <option value ='2'>Medium</option>
                    <option value ='3'>Normal</option>
                </select>

                <label>Assigned:</label>
                <select name='assigned' required onChange={handleChange} value={bugObject.assigned}>
                    <option>Al Amzad</option>  
                </select>

                <label>Creator:</label>
                <select name='creator' required onChange={handleChange} value={bugObject.creator}>
                    <option>Jon Doe</option>  
                </select>


                <label>Version:</label>
                <input name='version' placeholder='Application Version' onChange={handleChange} value={bugObject.version}></input>

                <label>Time:</label>
                <input name='time' placeholder='Bug Created time' onChange={handleChange} value={bugObject.time}></input>

                <button type='submit'>{props.title}</button>
            </form>

        </div>
    )

}

这是授权错误创建的后端代码

const Bugs = require('../models/bug')

//Get All Bug
exports.list = (req, res) => {
  const bug = Bugs.find().exec((err, bugs) => {
    if (err) {
      return res.status(400).json({
        error: 'Bugs not found',
      })
    }
    res.json(bugs)
  })
}

//Add a Bug
exports.add = (req, res) => {
  const newBug = req.body
  const bug = new Bugs(newBug)

  bug.save((err, bug) => {
    if (err) {
      console.log('Error while adding a bug', err)
      return res.status(404).json({
        error: 'Bug Not Added',
      })
    } else {
      // saved!
      console.log('Bug Saved')
      return res.status(200).send(bug)
    }
  })
}

//Get a Bug
exports.read = async (req, res) => {
  const id = req.params.id
  await Bugs.findById(id).exec((err, bug) => {
    if (err) {
      console.log('Error while reading a bug', err)
      return res.status(404).json({
        error: 'bug not found',
      })
    }
    res.json(bug)
  })
}

//Delete a Bug
exports.remove = async (req, res) => {
  const id = req.params.id

  await Bugs.findByIdAndRemove(id).exec(err => {
    if (err) {
      console.log('Error while deleting a bug', err)
      return res.status(400).json({
        error: 'Bug not found',
      })
    }
    res.status(200).send('Bug Deleted Successfully')
  })
}

//Update Bug
exports.update = async (req, res) => {
  const id = req.params.id
  const UpdatedBug = req.body
  await Bugs.findByIdAndUpdate(id, UpdatedBug).exec(err => {
    if (err) {
      console.log('Error while updating a bug', err)
      return res.status(404).json({
        error: 'Bug not found',
      })
    }
    res.status(200).send('Bug Updated Successfully')
  })
}

这是前端 App.js 代码

import React, { createContext, useState } from 'react'
import Login from './Views/Pages/Login/login'
import PrivateRoute from './Views/Pages/Login/privateRoute'
import Register from './Views/Pages/Login/Register'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Sidebar from './Views/Sidebar/sidebar'
import Dashboard from './Views/Pages/Dashboard/dashboard'
import ViewBugPage from './Views/Pages/viewBugs'
import CreateBug from './Views/Components/Bug Create/bugForm'
export const userContext = createContext()

function App() {
  const [loggedInUser, setLoggedInUser] = useState({
    token: '',
    role: 0,
    name: '',
    isSignedIn: false,
    email: '',
  })
  const[bugData, setbugData] = useState({
        token:'',
        name: '',
        details:'',
        steps: '',
        priority: '',
        assigned: '',
        creator: '',
        version: '',
        time: '',
        isSignedIn: false,

  })
  return (
    <userContext.Provider value={[loggedInUser, setLoggedInUser,bugData, setbugData]}>
      <Router>
        <Sidebar />
        <Switch>
            <PrivateRoute path='/dashboard' exact>
            <Dashboard />
          </PrivateRoute>
          <PrivateRoute path='/viewBugs'>
            <ViewBugPage />
          </PrivateRoute>
          <Route path='/signup'>
            <Register />
          </Route>
          <Route path='/login'>
            <Login />
          </Route>

          <Router path='/create'>
            <div className='page-container'>
              <CreateBug title='Create Bug' />
            </div>{' '}
          </Router>
        </Switch>
      </Router>
    </userContext.Provider>
  )
}

export default App

标签： javascriptnode.jsreactjsreact-reduxfetch-api