Реагировать приложение не получает res.data (JSON) с сервера Express, хотя почтальон делает - PullRequest
Новая
       18

Реагировать приложение не получает res.data (JSON) с сервера Express, хотя почтальон делает

0 голосов
/ 22 мая 2019

При отправке запросов POST или GET на наш сервер Express, который обслуживается через PM2 на EC2, Postman получает полный ответ, включая данные JSON, однако наше приложение React (как локально, так и развернутое через CF) получает только код состояния ответа и сообщение и имеет переменную данных в виде пустой строки. Приложение React использует axios для этих вызовов.

Я провел довольно много времени с поддержкой AWS, но мы пришли к выводу, что это не проблема с EC2 или CF.

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

Это вызов на стороне клиента: 

export function signIn (data) {
  return (dispatch) => {
    dispatch(addSignInStatus('PENDING'))
    axios.post(`${config.production_url}/api/user/login`, data)
      .then(res => {
        return dispatch(addSignIn(res.data))
      }).catch(err => {
        dispatch(addError(err))
        return dispatch(addSignInStatus('ERROR'))
      })
  }
}

А это ответ на стороне сервера: 

export function login(req,res){
  let username = ''
  let password = ''
  if(req.body.username && req.body.password){
    username = req.body.username;
    password = req.body.password;
  } else {
    res.status(400).json({
      message:"Error logging In",
      error: "No username or password specified"
    });
    return;
  }
  _user.login(username,password).then(data=>{
    res.status(200).json(data)
  })
  .catch(error=>{
      res.status(400).json({message:"Error Signing in User",error:error});
  });
}

В приложении React сервер отвечает правильным кодом состояния и сообщением, но res.data возвращается в виде пустой строки, а в Firefox выдается эта ошибка: 

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

Сервер должен отвечать объектом JSON, подобным следующему: 

{
    "message": "Sign-in Successful",
    "user": {
        "skills": [],
        "social": [],
        "wallets": [],
        "followers": [],
        "following": [],
        "groupsOwned": [],
        "groupsJoined": [],
        "starred": [],
        "pinned": [],
        ...
    },
    ...
}

и это происходит, когда запрос отправляется через Почтальон.

Edit:

Сервер принимает запросы с разными источниками: 

app.use(cors());
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Редактировать 2 РЕШЕНИЕ:

Оказалось, что это проблема с библиотекой npm "сжатие"

1 Ответ

0 голосов
/ 22 мая 2019

Похоже, вы делаете междоменных запросов, которые не удается. Браузеры блокируют междоменные запросы по умолчанию. Концепция междоменных запросов не относится к Postman, потому что ваш клиент (Postman) работает со всеми сетевыми разрешениями вашей ОС, а не ограничен внутри браузера.

Проверьте вкладку «Сеть» в инструментах разработчика вашего браузера. Если ваши запросы междоменные, браузеру будет предшествовать их запрос OPTIONS. Это известно как «предполётный запрос».

В этот момент, если ваш сервер ожидает междоменный трафик, он должен отвечать набором заголовков, авторизующих кросс-браузерные запросы. Если это произойдет, браузер будет уверен, что никто не делает ничего подозрительного, и он продолжит выполнять запрос POST, который находится в вашем коде.

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

Вот все, что вам нужно знать для реализации CORS на вашем сервере: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

...