CORS, Cordova, AngularJs $ http e arquivo: // confusion

Eu tenho um aplicativo AngularJS / Cordova que pesquisa um serviço JSON em um servidor remoto:

$http({method: 'GET', url: 'http://example.com/index.php'}) 

Desenvolvendo no navegador e executando o servidor apache da minha intranet ( http://dev ), recebo o header “No ‘Access-Control-Allow-Origin'”, portanto, corrijo isso adicionando:

 Header set Access-Control-Allow-Origin "http://dev" 

Tudo funciona bem, e eu vejo a Origin:http://dev em minhas ferramentas de desenvolvimento do Chrome.

Então, tendo que pensar sobre isso pela primeira vez, gostaria de saber qual será a Origem quando o aplicativo for executado nas visualizações da Web do Android / iOS. Decido fazer uma compilation e implantar em meus dispositivos e esperar ver o mesmo erro na debugging remota (Safari para iOS e Weinre para Android), mas para minha surpresa funciona (sem enviar headers de CORS)! Eu também acho que em ambos os dispositivos, o aplicativo é executado na webview sob o arquivo: // esquema, em vez de (o que eu assumi) um servidor http de alguns tipos fornecidos pelo sistema operacional do telefone.

Portanto, a pesquisa parece sugerir que o CORS não é necessário para file: // – tal “site” pode acessar qualquer recurso XHR em qualquer domínio. Mas, quando eu testo isso em navegadores de desktop eu acho que enquanto o Safari não precisa de CORS para arquivo : // mas o Chrome funciona e o FireFox funciona de qualquer forma sem o CORS

Então minhas perguntas:

1) Por que meu aplicativo funciona sem o CORS no Android / iOS – é porque o CORS não se aplica ao file: // ou o Cordova está fazendo algo para que ele funcione no dispositivo?

Eu tenho na minha configuração

2) se, pendente de respostas para Q1, eu deveria querer estar no site seguro e explicitamente permitir solicitações de aplicativos, qual o valor que você dá ao Access-Control-Allow-Origin para file: // “hosts”? na minha debugging não há header de origem nas solicitações de file: //

3) além de bloquear a solicitação de XHR para o servidor remoto, o Chrome também está bloqueando meus modelos de aplicativo (estou usando arquivos separados), veja abaixo. Este é um problema em potencial com meu aplicativo ou apenas um problema do Chrome com o qual não preciso se preocupar?

 XMLHttpRequest cannot load file:///Volumes/projects/phonegap/www/templates/tabs.html. Cross origin requests are only supported for HTTP. 

Existem duas maneiras de os headers CORS sinalizarem que um XHR entre domínios deve ser permitido:

  • enviando Access-Control-Allow-Origin: * (permite todos os hosts)
  • Coloque o host que você gostaria de permitir no header de Origin pelo seu back-end

Quanto ao file:// URLs eles produzirão uma Origin nula que não pode ser autorizada via segunda opção ( echo-back ).

Como mencionado :

A política de domínio cruzado não se aplica ao PhoneGap (por vários motivos, basicamente porque o aplicativo está essencialmente executando o arquivo: // URI no dispositivo).

Esteja ciente de que você precisará configurar uma lista de permissions para que seus aplicativos acessem esses domínios externos.

Quanto ao problema do Chrome , que pode ser visto no console do desenvolvedor:

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/2.html XMLHttpRequest cannot load file:///C:/2.html. Received an invalid response. Origin 'null' is therefore not allowed access. XMLHttpRequest cannot load file:///C:/2.html. Received an invalid response. Origin 'null' is therefore not allowed access.

houve uma discussão sobre o rastreador de problemas do projeto Chromium, # 40787 . Eles marcam os problemas como não corrigem, já que esse comportamento está acontecendo por design.

Há uma solução alternativa proposta para simplesmente desativar o CORS no Chrome para fins de desenvolvimento, iniciando o chrome com --allow-file-access-from-files --disable-web-security

por exemplo para o Windows

 `C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security` 

Aqui está mais uma resposta relacionada com cordova:

  • Aplicativos CORS e phonegap
  • Domínio de lista de permissions no Apache Cordova – um modelo de segurança que controla o access a domínios externos.

Verifique estes resources para mais informações sobre o CORS:

Verifique também o suporte do navegador para o CORS:

E para o registro formal especificação CORS no W3C 🙂