Python 请求 POST 和 axios POST 之间的区别

Question

I am having a difficult time understanding why my API call does not work in axios (relatively new to JS). I have built an API server that takes in an Authorization header with a JWT token.

Here is my POST request workflow in Python:

resp = requests.post('http://127.0.0.1:8000/api/v1/login/access-token', data={'username': 'admin@xyz.com', '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

Using 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...

What is different about the two above requests? Why does the axios version return different results than requests?

In my API, CORS have been set to * , and I know that the token within Axios is being saved properly in sessionStorage .

Any ideas?

Answer 1

As far as I can see you are passing your username and password in axios as params and as body data in your python request, I am not sure if your backend expects it as params or body data but try changing const params = new URLSearchParams(); to const params = new FormData(); if the problem is that the backend isn't getting the body data it needs. The best thing I could recommend is checking your browser network tab and seeing what exactly the problem is when you hit your server.