2

Estou tentando desenvolver um aplicativo hibrido usando ionic e angularjs e para isso estou testando no browser.

Quando eu faço ionic serve ele cria um servidor local com o endereco localhost:8100/#/main e meu webservice tbm esta no localhost na porta 80.

Quando tento fazer alguma requisicao ajax para esse webservice o Firefox me retorna a mensagem:

Requisição cross-origin bloqueada: A política de mesma origem (Same Origin Policy) impede a leitura do recurso remoto em http://localhost/AppPanel/users/doLogin.json. (Motivo: o cabeçalho CORS 'Access-Control-Allow-Origin' não está presente).`

Ja tentei desabilitar essa verificação no Firefox dessa maneira: about:config -> security.fileuri.strict_origin_policy -> false mas não consegui resultados ainda. Fiz meu webservice em CakePHP.

Como resolver esse problema?

5
  • 1
    @Bacco estou tentando aqui, assim que conseguir(se conseguir) posto a resposta. Se nao conseguir vou criar uma maquina virtual mesmo. obrigado 13/11/2015 às 3:43
  • 1
    Você implementou o CORS na sua API ? 13/11/2015 às 10:04
  • Onde está localizado o seu serviço e seu front-end ? Estão no mesmo diretório ou diretórios diferentes? 13/11/2015 às 16:39
  • @FelippeTadeu o frond-end(browser app) e o back-end(webservice) estão todos no localhost. 14/11/2015 às 0:50
  • problema resolvido. Adicionei ao atalho do Chrome os parametros --args --allow-file-access-from-files --disable-web-security e agora funcionou blzinha. Obrigado a todos. 14/11/2015 às 1:56

1 Resposta 1

1

Você contornou a segurança da app e do backend desabilitando o CORS. Para configurar o CORS no cliente e no servidor (em ambiente de desenvolvimento) eu faço isso:

index.html:

<meta http-equiv="Content-Security-Policy"
        content="default-src *;
               script-src 'self' 'unsafe-inline' 'unsafe-eval'
                           127.0.0.1:*
                           http://*.gstatic.com          
                           http://*.googleapis.com
                           https://*.gstatic.com
                           https://*.googleapis.com
                           ;
               style-src  'self' 'unsafe-inline'
                           127.0.0.1
                           http://*.gstatic.com         
                           http://*.googleapis.com
                           https://*.gstatic.com
                           https://*.googleapis.com
    ">

no seu backend, defina os headers para aceitar a origem 127.0.0.1 (exemplo em RubyOnRails):

def set_headers    #este é um before_filter no controller
    if request.env['HTTP_ORIGIN'] and request.env['HTTP_ORIGIN'].match(/^http:\/\/127\.0\.0\.1/)
        headers['Access-Control-Allow-Origin'] = '*'
        headers['Access-Control-Allow-Methods'] = 'GET' #'POST, PUT, DELETE, GET, OPTIONS'
        headers['Access-Control-Request-Method'] = '*'
        headers['Access-Control-Allow-Headers'] = 'Origin' #'Origin, X-Requested-With, Content-Type, Accept, Authorization'
        puts "PERMITINDO CORS PARA ORIGIN: #{request.env['HTTP_ORIGIN']}"
    else
        #puts "HTTP_ORIGIN é nil => REQUEST.ENV => #{request.env}"
    end
end

Você deve servir a app assim:

ionic serve --address 127.0.0.1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .