尽管添加了适当的 headers，但仍被 CORS 策略错误阻止

Question

我正在尝试将 HTTP 请求从我的 React 应用程序发送到不同端口上的本地服务器。但是，每次我发送 POST HTTP 请求时，都会发生此错误：

CORS Error

这是我的 React 应用程序中的代码：

 const handleSubmit = async (e) => {
    e.preventDefault();
    const data = {ingredientInput};
    console.log(data.ingredientInput);
    console.log(JSON.stringify(data));
    const response = await fetch('http://localhost:5000/verify', {
        method: 'POST',
        
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
        },
        body: JSON.stringify(data),
    });

这是我服务器中的代码。

const express = require('express');
const router = express.Router();
let bodyParser = require('body-parser');
router.use(bodyParser.json());
router.use((req, res, next) => {
    res.append('Access-Control-Allow-Origin', '*');
    res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.append('Access-Control-Allow-Headers', 'Content-Type');
    next();
})

const PORT = 5000;

const app = express();

app.use(express.json());
const fs = require('fs');

app.post('/verify', (req, res) => {
    console.log(req.body);
})

我添加了浏览器声明的 headers，例如 'Access-Control-Allow-Origin' header，但 CORS 错误仍然发生。谁能告诉我这是什么问题？

Answer 1

您需要使用路由器。

app.use('/', router);

尽管添加了适当的 headers，但仍被 CORS 策略错误阻止

Getting blocked by CORS policy error despite adding appropriate headers

cors

express

reactjs