Работа с результатом вызова fetch () в React - PullRequest
Новая
       28

Работа с результатом вызова fetch () в React

0 голосов
/ 06 ноября 2019

Я пытаюсь создать страницу входа для приложения React Client с экспресс-бэкендом. 

// Except from App.js in Client

  async function performLogin (values) {
    const { email:username, password } = values;
    const credentials = { username, password };
    const response = await fetch('http://localhost:4000/tokens/', {
      method: 'POST',
      headers: new Headers({
        'Content-Type': 'application/json',
        'Accept': 'application/text',
      }),
      body: JSON.stringify(credentials)
    });
    console.log('Result from backend token: '+JSON.stringify(response));
  };

// tokens.js from backend

const jwt = require('jsonwebtoken');
const findUser = require('../lib/find-user');

const signature = process.env.SIGNATURE;
const expiresIn = process.env.EXPIRESIN;

const createToken = (user) =>
  jwt.sign(
    { userId: user.id },
    signature,
    { expiresIn: expiresIn }
  );

// Code used to respond to /tokens/ path

let createTokenRoute = (req,res) => {
  let credentials = req.body;
  console.log('Credentials: '+JSON.stringify(credentials));
  let user = findUser.byCredentials(credentials);
  console.log('User: '+JSON.stringify(user));
  if (user) {
    let token = createToken(user);
    res.status(201);
    console.log('Token: '+JSON.stringify(token));
    res.send(token);
  } else {
    res.sendStatus(422);
  }
};

Когда путь /tokens/ проверяется почтальоном, я получаю возвращенный токенкак текст, как и ожидалось, и консоль бэкэнда покорно выплевывает: 

Credentials: {"username":"rd@example.com","password":"12345678"}
User: {"id":"3","username":"rd@example.com","name":"Richard","password":"12345678"}
Token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c... etc."

и почтальон показывает мне ожидаемый результат: 

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c... etc.

Однако при вызове из кода App.jsбэкэнд ведет себя как прежде, перечисляя учетные данные, пользователя и токен ... но консоль браузера клиента возвращает мне пустой объект: 

Result from backend token: {}

я пробовал заголовок Accept, но мойневежество не позволит мне увидеть, где я иду не так. Я вполне уверен, что это что-то совершенно глупое; -)

Редактировать:

Поэтому я переписал функцию performLogin: 

  async function performLogin (values) {
    const { email:username, password } = values;
    const credentials = { username, password };
    const response = await fetch('http://localhost:4000/tokens/', {
      method: 'POST',
      headers: new Headers({
        'Content-Type': 'application/json',
        'Accept': 'application/text',
      }),
      body: JSON.stringify(credentials)
    });
    const result = await response.json();
    console.log('Result from backend token: '+result);
  };

и страницутеперь вылетает ... 

Unhandled Rejection (SyntaxError): The string did not match the expected pattern.
(anonymous function)
src/App.js:55
  52 |     }),
  53 |     body: JSON.stringify(credentials)
  54 |   });
> 55 |   const result = await response.json();
     | ^  56 |   console.log('Result from backend token: '+result);
  57 | };
  58 | 
View compiled

1 Ответ

1 голос
/ 06 ноября 2019

отправить ответ как json из бэкэнда 

 res.status(201).json({ token : token });

Принять JSON от внешнего интерфейса 

'Accept': 'application/json'

Надеюсь, это поможет вам. Дайте мне знать, если у вас возникли проблемы.

...