Разница между Fetch и Axios - PullRequest
Новая
       29

Разница между Fetch и Axios

0 голосов
/ 06 июля 2018

Может ли кто-нибудь объяснить мне, почему, когда я использую fetch и получил доступ к моему nodejs api - он авторизован, но когда я попытался использовать axios для доступа к своему api - он не авторизован.

Это код, который я использую в fetch (он взят из урока: https://medium.com/@alexanderleon/implement-social-authentication-with-react-restful-api-9b44f4714fa). Изучаю его способ аутентификации с использованием passport-facebook-token.

(клиент -> (логин fbsdk) -> fb -> (токен доступа) -> клиент -> (токен доступа) -> nodejs api -> (получить учетные данные) -> passport-fb-token -> (отправить учетные данные) -> nodejs api -> (учетные данные) -> клиент) 

const tokenBlob = new Blob([JSON.stringify({access_token: response.accessToken}, null, 2)], {type : 'application/json'});
    const options = {
        method: 'POST',
        body: tokenBlob,
        mode: 'cors',
        cache: 'default'
    };
    fetch('http://localhost:4000/api/v1/auth/facebook', options).then(r => {
        const token = r.headers.get('x-auth-token');
        r.json().then(user => {
            if (token) {
                this.setState({isAuthenticated: true, user, token})
            }
        });
    })

Это код моего аксиоса 

axios({
      method: 'post',
      url: 'http://localhost:4000/api/v1/auth/facebook',
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      data: {
        access_token: response.access_token
      }
  })
  .then((res) => console.log(res))
  .catch((err) => console.log(err));

Ответы [ 2 ]

0 голосов
/ 06 июля 2018

Вы должны настроить axios для использования вашего токена в одном центральном месте.Например 

export const configureAxios = (token) => {
    axios.interceptors.request.use(req => {
        // don't give our token to non-our servers
        if (isDomesticRequest(req.url)) {
            req.headers.Authorization = `Bearer ${token}`;
        }
        return req;
    });
}
0 голосов
/ 06 июля 2018

Этот блог должен помочь вам получить подробный ответ:

Fetch vs. Axios.js для выполнения http-запросов

Axios - это библиотека Javascript, используемая для выполнения http-запросов из node.js. или XMLHttpRequests из браузера, и он поддерживает API Promise это является родным для JS ES6. Еще одна особенность, которую он имеет над .fetch () это что он выполняет автоматическое преобразование данных JSON.

Если вы используете .fetch (), при обработке JSON происходит двухэтапный процесс данные. Первый состоит в том, чтобы сделать фактический запрос, а затем второй вызвать метод .json () для ответа.

Метод .fetch () - отличный шаг в правильном направлении http запрашивает нативный в ES6, но просто знайте, что если вы используете его там пара ошибок, которые могли бы быть лучше обработаны сторонними библиотеки, такие как Axios.

...