node.js - React Express Fetch 发布 CORS 错误 : Response to preflight request doesn't pass access control check: It does not have HTTP ok status

Question

我正在尝试使用 React、Node 和 Express 并使用 fetch 设置一个基本的用户注册表单。但是，当我尝试发送发布请求时，我在 Chrome 控制台中收到以下错误:1)“选项http://localhost:7001/v1/register500(内部服务器错误)”2) “从源点‘http://localhost:7001/v1/register’获取数据的访问已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:它没有 HTTP 正常状态。”

我的最终目标是将用户的电子邮件和密码保存在数据库中，但现在我想要的只是让请求到达后端并让后端记录正文以确保一切正常。我尝试了几种不同的设置标题的方法，但我不知道出了什么问题。下面是代码。

前端表单提交功能:

handleSubmit(e) {
    e.preventDefault();
    const signUpInfo = this.state; // { email: 'test@gmail.com', password: '123' }
    console.log(signUpInfo);

    fetch('http://localhost:7001/v1/register', {
      method: 'POST',
      body: JSON.stringify(signUpInfo),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(res => res.json())
    .then(response => console.log('Success:', response))
    .catch(error => console.error('Error:', error));
  }

服务器.js

const express = require('express');
const compression = require('compression');
const cfg = require('config');
const path = require('path');
const logger = require('morgan');
const cookieParser = require('cookie-parser')
const bodyParser = require('body-parser');
const config = require('config');

const app = express();

app.use(compression());
app.use(bodyParser());
app.use(cookieParser());


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(express.static(path.join(__dirname, 'public')));

app.use(function(req, res, next) {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,DELETE");
    res.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Access-Control-Allow-Headers, Content-Type, Authorization, Origin, Accept");
    res.setHeader('Access-Control-Allow-Credentials', true)
    next();
});

// CONTROLLERS
const userController = require('./controllers/userController.js');

// ROUTES
app.post('/v1/register', userController.register);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

app.listen('7001', function() {
    console.log('API server listening on port 7001!');
});


module.exports = app;

userController.js

exports.register = async (req, res, next) => {
  try {
    console.log(req.body);

    res.status(200).json({ status: 200, data: req.body, message: "test" });
  } catch (err) {
    console.log(err);
    res.status(500).json({ status: 500, data: null, message: err });
  }
}

我所寻找的只是后端控制台打印出正文。它适用于 axios 和 $.ajax，但不适用于 fetch。我也尝试过使用代理服务器，但没有效果(并且希望让它在没有代理的情况下工作)。

不确定这是否相关，但我使用 Chrome 作为浏览器和 Sequelize。

任何帮助将不胜感激。我觉得我错过了一些基本的东西。任何有助于加深我的学习的文章将是一个加号!

Answer 1

而不是使用

const app= express();

尝试使用

const app=express().use('*', cors());

并删除

app.use(function(req, res, next) {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,DELETE");
    res.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Access-Control-Allow-Headers, Content-Type, Authorization, Origin, Accept");
    res.setHeader('Access-Control-Allow-Credentials', true)
    next();
});

看看这是否有效。