React Express Fetch Post CORS 错误：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态

Posted 2023-02-22

【中文标题】React Express Fetch Post CORS 错误：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态

【英文标题】：React Express Fetch Post CORS error: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

【发布时间】：2019-06-12 07:05:44

【问题描述】：

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

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

前端表单提交功能：

handleSubmit(e) 
    e.preventDefault();
    const signUpInfo = this.state; //  email: '[e-mail]', 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));
  

server.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。

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

【参考方案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();
);

看看这是否有效。

【讨论】：

这行得通。谢谢您的帮助！知道为什么这有效而设置标题无效吗？

【参考方案2】：

首先安装“cors”：

npm i cors

第二次导入“cors”：

cors = reqquire("cors");

第三次使用“cors”：

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