CORS+ POST+express.js - 被 CORS 政策阻止

Question

我发送查询（反应应用程序ts）

export const setNewComment = async (
  productId: string,
  name: string,
  email: string,
  body: string,
  doSuccessNewComment: (data: string) => void,
  doErrorNewComment: () => void
) => {

  const config = {
    method: 'post',
    url: `http://localhost:3000/api/products/add-comment/${productId}`,
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
    },
    data: {
      name: name,
      email: email,
      body: body,
    }
  }

  await axios(config)
    .then(response => {
      console.log('Response', response.data)
      const data: IComment = response.data;
      doSuccessNewComment(data.id);
    })
    .catch(e => {
      console.log('Error: ', e.message)
      doErrorNewComment();
    })

服务器API（express ts）

productsRouter.post('/add-comment/:id', async (
  req: Request<{ id: string }, {}, CommentAddPayload>,  
  res: Response
) => {

  res.setHeader('Content-Type', 'application/json');
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods","PUT, POST, GET, DELETE, PATCH, OPTIONS");
  try {
    const commentToAdd = req.body;

    if (!commentToAdd) {
      res.status(400);
      res.send("Comment is empty");
      return;
    }

    const values = [[
       req.params.id,
       commentToAdd.name,
       commentToAdd.email,
       commentToAdd.body,
       uuidv4()
    ]]

    await connection.query<OkPacket>("INSERT INTO comments (product_id, name, email, body, comment_id) VALUES ?", [values]);
   
    res.status(201);
    res.send(commentToAdd);
  } catch (e) {
    throwServerError(res, e);
  }
});

结果

从源“http://localhost:5173”访问“http://localhost:3000/api/products/add-comment/6f1a6b96-6cd2-439c-a648-88b9f287f7d2”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

GET 有效，但 POST 无效

如何解决？ 谢谢

我正在发送 http POST 查询，但 brouser 阻止了答案

Answer 1

您的“GET”通过了，因为我相信您没有发送任何标头，因此没有向服务器发出预检请求。 但是在您的“POST”请求中，您添加了一些标头，这些标头需要通过服务器进行检查，并使用 OPTIONS 方法进行检查。 因此，创建一个选项并允许其中包含来源和内容类型。

或

如果您想允许对特定来源的列表进行cors，最好使用这个package以获得干净的代码