关于node.js：React Express Fetch Post CORS错误：对预检请求的响应未通过访问控制检查：它没有HTTP正常状态


React Express Fetch Post CORS error: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

我正在尝试使用React，Node和Express建立基本的用户注册表单，并使用访存。但是，尝试发送帖子请求时，Chrome控制台出现以下错误：
1)"选项http：// localhost：7001 / v1 / register 500(内部服务器错误)"
2)" CORS策略已阻止从来源'http：// localhost：3001'从'http：// localhost：7001 / v1 / register'获取访存的访问：对预检请求的响应未通过访问控制检查：它没有HTTP正常状态。"

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

前端表单提交功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
handleSubmit(e) {
    e.preventDefault();
    const signUpInfo = this.state; // { email: '[email protected]', 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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

1
2
3
4
5
6
7
8
9
10
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();

尝试使用

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

并删除

1
2
3
4
5
6
7
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();
});

看看是否可行。

相关讨论