Error No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I'm trying to make a biometric authentication on a remote machine, using XMLHttpRequest. But it is returning the following message:

XMLHttpRequest cannot load http://177.55.99.146:8080/autenticacao/autentica?arquivo=[object%20File]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.yaratecnologia.com.br' is therefore not allowed access

The code follows bellow .... Does anyone know where is the mistake? What should I do?

<?php
    // Allow from any origin
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

        exit(o);
    }

    echo "You have CORS!";
?>

<script type="text/javascript">  
    function autenticarbiometria() { 
       var fileInput = document.getElementById('fileInput');
       var file = fileInput.files[0];
       var reader = new FileReader();
       var campo = "";
       var status = "f";;

       if (file.size != 400) {
          alert("ATENÇÃO --> O arquivo selecionado NÃO está em um formato Biométrico válido!");
          return false;
       }

       if (!confirm("CONFIRMA AUTENTICAÇÃO BIOMÉTRICA NA BASE DE DADOS?")) {
          return false;
       }

       if(window.XMLHttpRequest) {
          req = new XMLHttpRequest();
          }
       else if(window.ActiveXObject) {
          req = new ActiveXObject("Microsoft.XMLHTTP");
          }

       // Arquivo PHP juntamente com o valor digitado no campo (metodo GET)
       var url = "http://177.55.99.146:8080/autenticacao/autentica?arquivo="+file;

       // Chamada do metodo open para processar a requisicao

       req.open("GET",url,true);
       req.send(null); 

       // Quando o objeto recebe o retorno, chamamos a seguinte funcao
       req.onreadystatechange = function() {
         alert("Retorno do readyState == " + req.readyState + " readyStatus == " + req.status);
         if(req.readyState == 4 && req.status == 200) {
             // Resposta retornada pelo busca.php
             var resposta = req.responseText;
             alert("ATENÇÃO --> RETORNO AUTENTICACAO = " + resposta);
          }  
        }
  }
</script>

Answer 1

Your snippet is a little confusing. If the whole code belongs to the same page, it seems like you have enabled CORS on you local machine, while the Access-Control-Allow-Origin must be set on the remote server you are autenthicating at.

You should change the code on the remote server by setting the correct Access-Control-Allow-Origin header or, if that's not possible, you should perform the authentication from PHP (server-side).