Разница между запросами Python POST и axios POST

Мне сложно понять, почему мой вызов API не работает в axios (относительно новый для JS). Я создал сервер API, который принимает заголовок Authorization с токеном JWT.

Вот мой рабочий процесс запроса POST на Python:

resp = requests.post('http://127.0.0.1:8000/api/v1/login/access-token', data={'username': '[email protected]', 'password': 'password'})
token = resp.json()['access_token']

test = requests.post('http://127.0.0.1:8000/api/v1/login/test-token', headers={'Authorization': f'Bearer {token}'})
# ALL SUCCESSFUL

Использование axios:

  const handleLogin = () => {
    const params = new URLSearchParams();
    params.append('username', username.value);
    params.append('password', password.value);
    setError(null);
    setLoading(true);
    axios.post('http://localhost:8000/api/v1/login/access-token', params).then(response => {
      console.log(response)
      setLoading(false);
      setUserSession(response.data.access_token);
      props.history.push('/dashboard');
    }).catch(error => {
      setLoading(false);
      console.log(error.response)
      if (error.response.status === 401) {
        setError(error.response.data.message);
      } else {
        setError("Something went wrong. Please try again later.");
      }
    });
  }
// the above works fine

// however:
  const [authLoading, setAuthLoading] = useState(true);

  useEffect(() => {
    const token = getToken();
    if (!token) {
      return;
    }

    axios.post(`http://localhost:8000/api/v1/login/test-token`, {
      headers: {
        'Authorization': 'Bearer ' + token
      }
    }).then(response => {
      // setUserSession(response.data.token);
      console.log('we made it')
      setAuthLoading(false);
    }).catch(error => {
      removeUserSession();
      setAuthLoading(false);
    });
  }, []);

  if (authLoading && getToken()) {
    return <div className="content">Checking Authentication...</div>
  }
// RETURNS A 401 Unauthorized response...

Чем отличаются два вышеуказанных запроса? Почему версия axios возвращает другие результаты, чем запросы?

В моем API для CORS установлено значение *, и я знаю, что token в Axios правильно сохраняется в sessionStorage.

Любые идеи?


person sgerbhctim    schedule 27.04.2020    source источник


Ответы (1)


Насколько я понимаю, вы передаете свое имя пользователя и пароль в axios как параметры и как данные тела в запросе на Python, я не уверен, ожидает ли ваш бэкэнд его как параметры или данные тела, но попробуйте изменить const params = new URLSearchParams(); на const params = new FormData();, если проблема что серверная часть не получает необходимых данных тела. Лучшее, что я мог бы порекомендовать, - это проверить вкладку сети вашего браузера и посмотреть, в чем именно проблема, когда вы попадаете на свой сервер.

person Alem Tuzlak    schedule 27.04.2020
comment
Огромное спасибо! Таким образом, запрос handleLogin отлично работает с URLSearchParams .. проблема возникает, когда я пытаюсь вызвать test-token конечную точку, передающую headers, как я это делаю на конце Python requests. Есть ли разница в том, как я должен передавать headers через axios? - person sgerbhctim; 27.04.2020
comment
о, вау, я читал, что ниже работает нормально, а не выше, хм, судя по всему, это идентичные запросы, вы проверили фактический запрос? Также, если вы создаете более крупное приложение, я рекомендую изучить создание экземпляров axios. Вы создаете их один раз, и они совместно используют свою конфигурацию для всех вызовов, и вы можете добавлять к ним перехватчики, чтобы в дальнейшем помочь вам обрабатывать ваши запросы и ответы. - person Alem Tuzlak; 27.04.2020