Basic authentication request does not work

Asked

Viewed 510 times

0

I made a simple program to fetch the user token, but it needs a Basic Authentication, which has given me the error below.

Where am I going wrong?

My code:

<a href="#" onclick="javascript:meu_acesso()"><b>Acessar</b></a>
<script src="axios.min.js"></script>
<script type="text/javascript">
 function meu_acesso() {
    var session_url = 'https://treinagedave.sp.gov.br/gedave/api/spservicos/v1/login';
    var uname = "wsService";
    var pass = "%$c55e3y5y7n522$%";    
    var p_cpf = "12345678901";
    var p_senha =  "pass0001";   

    axios.post
    ( session_url, 
       { params: { cpf: p_cpf, senha: p_senha } }
      ,{ headers: { 'Access-Control-Allow-Origin': '*'
                  , "Accept": "application/json"
                  , 'Content-Type': 'application/json'
                   } }
      ,{ auth: { username: uname, password: pass } }
    )
    .then(function(response) {
      console.log('Authenticated' + response);
    })
    .catch(function(error) {
      console.log('Error on Authentication' + error);
    });
 }
</script>

Upshot:

Access to XMLHttpRequest at 'https://treinagedave.sp.gov.br/gedave/api/spservicos/v1/login' from origin 'http://www.sistemas24horas.com.br' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Error on AuthenticationError: Network Error   axios.min.js:8 POST https://treinagedave.sp.gov.br/gedave/api/spservicos/v1/login net::ERR_FAILED
javascript axios
  • 1

    It seems to me that the error is due to the CORS policy. This answers your question? What is the meaning of CORS?

  • From what I’ve researched, I agree with you. Today I realize this access in an Android application with Java code, passing the authentication user/pass, receiving return a json. I have to apply this to a site and recover this user data, however I am not able to do this authentication, I have tried several ways, I passed some parameters to the Next, but without result, always gives the same error. There’d be some other way to apply it?

  • This is because the Android request client does not take into account the CORS policies, which are something primarily implemented to add a thin layer of security in the browsers. If you have access to the server you are trying to reach, you can add some HTTP headers (related to CORS) that allow you to request your website via AJAX. That is the case?

  • Yes, I have access to the server. You could let me know what header parameter I should inform Axios to fetch the data?

1 answer

1

The error you are experiencing is due to the security policies of the CORS, implemented in the most modern browsers. To learn more, read this other question.

Thus, you should add headers on your server that allow the application to be consumed by any source, which is currently not the case.

Some of the headers your server should send in the reply (response) are these:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS

It will allow any client to be able, from any browser source, to access the features of their application on the server. You can exchange the asterisk for a URL specifying which source can consume the resource.

Remember that these security measures are only valid in the browser.

This documentation MDN explains about CORS much more in depth.

Browser other questions tagged javascript axios

You are not signed in. Login or sign up in order to post.