PUT请求在Postman中有效,但在React中无效

wfsdck30  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(196)

我正在用MERN堆栈构建一个应用程序,它允许创建帐户,然后发布或删除帖子。在帖子显示在主页上之前,它必须由管理员级别的用户批准。现在我正在尝试实现一个功能,用户可以批准自己的帖子。它在Postman中运行得很完美,但在前端总是被拒绝,没有任何错误消息。
以下是我的后端文件:
postRoutes.js

const express = require("express")
const router = express.Router()
const { getPosts, setPost, updatePost, deletePost } = require("../controllers/postController")
const { protect } = require("../middleware/authMiddleware")

router.route("/").get(getPosts).post(protect, setPost)
router.route("/delete/:id").delete(protect, deletePost)
router.route("/update/:id").put(protect, updatePost)

module.exports = router

postController.js中的updatePost函数

const updatePost = asyncHandler(async (req, res) => {
  const post = await Post.findById(req.params.id)

  if (!post) {
    res.status(400)
    throw new Error("Post not found")
  }

  if (!req.user) {
    res.status(401)
    throw new Error("User not found")
  }

  if (post.user.toString() !== req.user.id && req.user.admin === false) {
    res.status(401)
    throw new Error("User not authorized")
  }

  const updatedPost = await Post.findByIdAndUpdate(req.params.id, req.body, { new: true })

  res.status(200).json(updatedPost)
})

和前端文件:
postService.js中的updatePost函数

const updatePost = async (postId, data, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`
    }
  }

  const response = await axios.put(API_URL + `update/${postId}`, data, config)

  return response.data
}

postSlice.js中的updatePost函数

export const updatePost = createAsyncThunk("posts/update/:id", async (postId, postData, thunkAPI) => {
  try {
    const token = thunkAPI.getState().auth.user.token
    return await postService.updatePost(postId, postData, token)
  } catch (error) {
    const message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString()
    return thunkAPI.rejectWithValue(message)
  }
})

我的前端组件中的按钮onClick函数

onClick={() => dispatch(updatePost(post._id, { approved: true }))}
qybjjes1

qybjjes11#

确保您使用的是来自npm package cors的cors中间件。
app.use(cors())

相关问题