React Cors проблема с ExpressJS

Question

РЕДАКТИРОВАТЬ: Я получаю следующую ошибку при попытке получить доступ к моему серверу:

POST http://localhost: 3001 / user / login 500 (Внутренняя ошибка сервера)

Я не уверен, в чем причина ошибки:

Реакция:

export default class Account extends React.Component {
constructor() {
    super();
    this.state = {
      isLoggedIn: false,
    };
    this.login = this.login.bind(this);
  }
  componentDidMount() {
    const cookies = new Cookies();
    const user = cookies.get('user');
    const pass = cookies.get('pass');
      this.setState({processing: true})
      fetch('http://localhost:3001/user/login', {
        credentials : 'omit',
        method      : 'POST',
        body : JSON.stringify({
          username : user,
          password : pass
        })
      })
      .then(res  => res.json())
      .then(json => {

        // If the login was successful
        if (json.success) {
          this.setState ({
            isLoggedIn: true
          })
        }

        // Otherwise
        else {
          this.setState({
            errorMessage: 'Invalid username or password',
            processing  : false
          });
        }

      })
      .catch(() => {
        this.setState({
          errorMessage: 'An unknown error occurred',
          processing  : false
        });
      });
  }
render() {
  if(this.state.isLoggedIn) {
    return (<p> Logged In</p>);
  }
  else {
    return (<p> Not Logged In</p>);
  }
}}

Express:

router.post('/login', (req, res) => {

  return User
    .findOne({username: req.body.username})
    .then (user => user.authenticate(req.body.password))
    .then (auth => {
      if (auth.user !== false) {
        req.session.user = auth.user.user
      }
      res.json({success: auth.user !== false})
    })
    .catch(() => res
      .status(500)
      .json({success: false})
    );
});

Эта ошибка не дает много информации о том, что я могу делать неправильно, но это может быть связано с cors.

Answer 1

Вы добавили параметр proxy в package.json? Я часто использую эту настройку, но не вижу проблемы, которую вы видите. Попробуйте добавить следующий параметр в package.json

{
  "name": "mern",
  "version": "0.1.0",
  "proxy": "http://localhost:3001/"
...
}

И тогда все ваши вызовы API могут быть просто /api, потому что был установлен параметр прокси.

Answer 2

Ваша консоль читает: Cannot read property 'authenticate' of null.

В вашем .catch api -

.catch(() => res
  .status(500) // you are sending 500 (internal server error) irrespective of what your actual error is//
  .json({success: false})
);

Ваша ошибка -

  return User
    .findOne({username: req.body.username})
    .then (user => user.authenticate(req.body.password)) //can read authenticate of null because user is null i.e This user does not exist in your DB. //

Я предлагаю добавить err в вашем блоке catch в качестве параметра и выполните правильную обработку ошибок. Эта проблема связана с неправильной обработкой ошибок.

Answer 3

Там проблема не в вашем коде (вероятно); поскольку запрос будет рассматриваться как SAME-ORIGIN, если domain, port и protocol все будут одинаковыми в источнике и месте назначения запроса; но ваш запрос направляется на порт 3001, а не 3000, который нарушает правило того же происхождения; следовательно CROSS-ORIGIN; две другие части в порядке, оба на localhost и http, но порт другой; вам необходимо настроить сервер так, чтобы он правильно реагировал на запрос OPTION (перед полетом), чтобы исправить это;