React Express Fetch Post Ошибка CORS: Ответ на предполётный запрос не проходит проверку контроля доступа: не имеет статуса HTTP ok - PullRequest
Новая
       23

React Express Fetch Post Ошибка CORS: Ответ на предполётный запрос не проходит проверку контроля доступа: не имеет статуса HTTP ok

0 голосов
/ 18 января 2019

Я пытаюсь настроить базовую форму регистрации пользователей с помощью React, Node и Express и использую fetch. Тем не менее, я получаю следующие ошибки в консоли Chrome, когда я пытаюсь отправить запрос по почте: 1) «ОПЦИИ http://localhost:7001/v1/register 500 (внутренняя ошибка сервера)» 2) «Доступ к извлечению в« http://localhost:7001/v1/register' из источника »http://localhost:3001' был заблокирован политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: он не имеет статуса HTTP ok. «

Моя конечная цель - сохранить электронную почту и пароль пользователя в базе данных, но пока все, что я хочу, - это чтобы запрос прошел через бэкэнд и заставил бэкэнд зарегистрировать тело, чтобы убедиться, что все работает. Я пробовал несколько разных способов установки заголовков, и я понятия не имею, что не так. Ниже приведен код.

Функция отправки формы внешнего интерфейса: 

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.

Любая помощь будет принята с благодарностью. Я чувствую, что упускаю что-то фундаментальное. Любые полезные статьи для углубления моего обучения были бы плюсом!

1 Ответ

0 голосов
/ 18 января 2019

Вместо использования 

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

посмотрите, работает ли это.

...