Cross origin not working with angulasJS and PHP

Question

I am trying to download a file through the generating Angularjs in a php page:

PHP page

header("Access-Control-Allow-Origin: *");

include('conn.php');

$arquivo = 'Contratos_Pendentes.xls';

$tabela = '<table border="1">';
$tabela .='<tr>';
$tabela .='<td colspan="5">Contratos Pendentes</tr>';
$tabela .='</tr>';
$tabela .='<tr>';
$tabela .='<td><b>Corretor</b></td>';
$tabela .='<td><b>Cliente</b></td>';
$tabela .='<td><b>CPF</b></td>';
$tabela .='<td><b>Numero Contrato</b></td>';
$tabela .='<td><b>Fisico</b></td>';
$tabela .='</tr>';

$resultado = mysql_query('SELECT A.NOME_CORRETOR as corretor, A.CPF_CONTRATO as cpf, A.NUMERO_CONTRATO as numero_contrato, A.FISICO as fisico, B.NOME as cliente, B.CPF as cpf2 FROM CONTRATO A JOIN CLIENTE B ON A.CPF_CONTRATO = B.CPF AND A.FISICO = "PENDENTE" ');

while($dados = mysql_fetch_array($resultado))
{
$tabela .='<tr>';
$tabela .='<td>'.$dados['corretor'].'</td>';
$tabela .='<td>'.$dados['cliente'].'</td>';
$tabela .='<td>'.$dados['cpf'].'</td>';
$tabela .='<td>'.$dados['numero_contrato'].'</td>';
$tabela .='<td>'.$dados['fisico'].'</td>';
$tabela .='</tr>';
}
$tabela .='</table>';

header('Content-disposition: attachment; filename='.$arquivo);
header('Content-Length: ' . filesize($arquivo));
header('Content-Transfer-Encoding: binary');
header('Cache-Control: must-revalidate');
header('Pragma: public');

readfile($arquivo);

echo $tabela;

Angularjs

 $scope.GerarPlanilha = function (){
$http({
            url: 'localhost:8080/ltfinaceira/php/RelatorioFisico.php',
            method: 'POST',
            responseType: 'arraybuffer',
            headers: {
                'Content-type': 'application/json',
                'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            }
        }).success(function(data){
            var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
            saveAs(blob, file_name_to_be+'.xlsx');
        }).error(function(){

        });
    };

But I get the following mistake

XMLHttpRequest cannot load localhost:8080/ltfinaceira/php/RelatorioFisico.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'localhost:8080/ltfinaceira/php/RelatorioFisico.php'.

Answer 1

You used localhost:8080 sure would be http://localhost:8080, the way Voce did, omitting http ajax this thinks localhost and the protocol and the 8080 and the host.

And another detail, it seems file_name_to_be it was not set by you, so set a value (I don’t know exactly where the file name comes from)

Knife like this:

 $scope.GerarPlanilha = function (){
      var file_name_to_be = "meu_arquivo";
      $http({
            url: 'http://localhost:8080/ltfinaceira/php/RelatorioFisico.php',
            method: 'POST',
            responseType: 'arraybuffer',
            headers: {
                'Content-type': 'application/json',
                'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            }
        }).success(function(data){
            var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
            saveAs(blob, file_name_to_be+'.xlsx');
        }).error(function(){

        });
    };

Answer 2

Maybe these commands can help you "debug" folder access when starting the browser:

Windows:

chrome.exe --allow-file-access-from-files

or

chrome.exe --allow-file-access-from-files --disable-web-security

Mac:

open /Applications/Google\ Chrome.app/ --args --allow-file-access-from-files