我正在尝试使用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。

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

最佳答案

而不是使用

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


看看是否可行。

07-24 09:38
查看更多