React, Axios issue: Response for preflight has invalid HTTP status code 401

1
votes

I'm building a login page with ReactJS and Axios. My team has launched a local server that can response to Postman request. enter image description here

For some reasons, it does not work on my login page. Here my code:

const request = axios.request({
    url: `http://codelab:20080/uaa/oauth/token?grant_type=password&username=thien&password=123456`,
    method: 'POST',
    headers: {
      'Authorization': "Basic YnJvd3Nlcjo=",
    }
  }).then(response => {
    console.log(response);
  }).catch(error => {
    console.log(error);
  });

And the error:

enter image description here

I'm not sure which different between those request that cause my code to fail. Also I've installed "Allow-Control-Allow-Origin" extension, but no use.

2
javascriptreact-reduxaxioshttp-status-code-401

2 Answers

2
votes

THE OPTIONS request is automatically sent when you make a CORS by browser, And only when the OPTIONS return OK, the CORS is allowed. POSTMAN doesn't exist OPITONS, therefore POSTMAN can send successfully. So, you should ask your backend engineer to filter OPTIONS request.

0
votes

Code 401 means Unauthorize so the problem there may come from your backend if that api is throwing you to 401 I doubt it was coming from CORS since the error would really point you to cors. Try asking the validation from your backend, but based from your code in the axios and postman I see no difference.