Question

我正在尝试使用React，Node和Express并使用访存来建立基本的用户注册表单。但是，尝试发送帖子请求时，Chrome控制台出现以下错误： 1）“选项http://localhost:7001/v1/register 500（内部服务器错误）” 2）“从原点'http://localhost:7001/v1/register'到'http://localhost:3001'的提取访问已被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));
  }

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。

任何帮助将不胜感激。我觉得我缺少基本的东西。任何有用的文章来加深我的学习都是加分的！

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();
});

看看是否可行。

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

1 个答案: