Requisição cross-origin bloqueada: A política de mesma origem (Same Origin Policy) impede a leitura do recurso remoto…

Entendendo a Same Origin Policy e a recomendação CORS.

De tempos em tempos, quando começo a desenvolver alguma aplicação eu me deparo com o problema (que na verdade é um mecanismo de segurança) de “Requisição cross-origin bloqueada” no Firefox, e  “No Access-Control-Allow-Origin’ header is present on the requested resource. Origin […] is therefore not allowed access…” no Google Chrome.

O mecanismo de bloqueio de requisição cross-origin foi ativado porque eu estava tentando acessar uma Api Json em outro servidor que não o servidor de origem. O servidor estava sendo acessado era http://192.168.0.12:8100 e a minha app buscava dados json via XMLHttpRequest com GET  no endereço http://dominio.com.br/api/.json.

Segundo a documentação da MDN (HTTP access control – CORS) o browser restringe HTTP requests iniciados a partir de scripts. Por isso uma aplicação executada num determinado domínio, só pode acessar dados (via scripts) no mesmo domínio.

O W3C então criou a recomendação Cross-Origin Resource Sharing, que basicamente recomenda a inserção de alguns cabeçalhos no Response Header que “dizem” ao navegador que o acesso às informações via script é permitido. Isso explica a resposta de erro no console do Chrome que diz “No Access-Control-Allow-Origin’ header is present on the requested resource. Origin […] is therefore not allowed access…”. E também a mensagem completa do Firefox: “Requisição cross-origin bloqueada: A política de mesma origem (Same Origin Policy) impede a leitura do recurso remoto em http://domínio.com.br/api/.json. (Motivo: o cabeçalho CORS ‘Access-Control-Allow-Origin’ não está presente).“.

Para resolver isso ou você adiciona os cabeçalhos na resposta ao request, no lado do servidor, ou inicializa os navegadores com o mecanismo de segurança desabilitado. Se for fazer faça por sua conta e risco.

Como Desabilitar a Same Origin Policy do GOOGLE CHROME:

No Mac, abra o terminal e inicie o Chrome com as seguintes flags:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --disable-web-security --user-data-dir -–allow-file-access-from-files