AngularJS não detectando o header Access-Control-Allow-Origin?

Estou executando um aplicativo angular em um virtualhost local ( http://foo.app:8000 ). Ele está fazendo uma solicitação para outro VirtualHost local ( http://bar.app:8000 ) usando $http.post .

 $http.post('http://bar.app:8000/mobile/reply', reply, {withCredentials: true}); 

Na guia “Rede” das Ferramentas do desenvolvedor do Google Chrome, vejo a solicitação OPTIONS e a resposta inclui o header:

 Access-Control-Allow-Origin: http://foo.app:8000 

No entanto, a solicitação POST é cancelada com o seguinte erro:

Nenhum header ‘Access-Control-Allow-Origin’ está presente no recurso solicitado. Portanto, a origem ‘ http://foo.app:8000 ‘ não tem permissão de access.

Alguém já passou por isso? O header Access-Control-Allow-Origin é muito claramente incluído na resposta da requisição OPTIONS, então eu não posso, por toda a vida, descobrir por que o POST está agindo como se o header estivesse faltando.

Access-Control-Allow-Credentials também é configurado como true .

É um bug no chrome para o dev local. Tente outro navegador. Então vai funcionar.

Há uma solução alternativa para aqueles que querem usar o Chrome. Essa extensão permite que você solicite qualquer site com AJAX de qualquer origem, pois ele adiciona 'Access-Control-Allow-Origin: *' header 'Access-Control-Allow-Origin: *' à resposta.

Como alternativa, você pode adicionar esse argumento ao seu inicializador do Chrome: --disable-web-security . Note que eu só usaria isso para fins de desenvolvimento, não para “navegação na web” normal. Para referência, consulte Executar o Chromium with Flags .

Como nota final, instalando a extensão mencionada no primeiro parágrafo, você pode facilmente ativar / desativar o CORS.

Eu estava enviando pedidos de angularjs usando o serviço $ http para o flask em execução em http://localhost:8090/ e eu tive que aplicar o CORS caso contrário recebi erros de solicitação como o header “No ‘Access-Control-Allow-Origin’ está presente no recurso solicitado ”

 from bottle import hook, route, run, request, abort, response #https://github.com/defnull/bottle/blob/master/docs/recipes.rst#using-the-hooks-plugin @hook('after_request') def enable_cors(): response.headers['Access-Control-Allow-Origin'] = '*' response.headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT' response.headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept' 

Eu experimentei exatamente o mesmo problema. Para mim, a solicitação OPTIONS seria concluída, mas a solicitação POST diria “abortada”. Isso me levou a acreditar que o navegador nunca estava fazendo a solicitação POST. O Chrome disse algo como “Cabeçalhos provisórios de cuidado são mostrados” nos headers de solicitação, mas nenhum header de resposta foi exibido. No final, mudei para a debugging no Firefox, o que me levou a descobrir que meu servidor estava respondendo com um erro e nenhum header do CORS estava presente na resposta. O Chrome estava realmente recebendo a resposta, mas não permitindo que a resposta fosse mostrada na exibição de rede.

O CROS precisa ser resolvido do lado do servidor.

Crie filtros de acordo com o requisito para permitir o access e adicionar filtros no web.xml

Exemplo usando a mola:

Classe de Filtragem:

 @Component public class SimpleFilter implements Filter { @Override public void init(FilterConfig arg0) throws ServletException {} @Override public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException { HttpServletResponse response=(HttpServletResponse) resp; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); chain.doFilter(req, resp); } @Override public void destroy() {} } 

Web.xml:

  simpleCORSFilter  com.abc.web.controller.general.SimpleFilter    simpleCORSFilter /*  

Eu acabei de me deparar com esse problema hoje. Descobriu-se que um erro no servidor (exceção de ponteiro nulo) estava causando falha na criação de uma resposta, mas ainda gerava um código de status HTTP de 200. Devido ao código de status 200, o Chrome esperava uma resposta válida. A primeira coisa que o Chrome fez foi procurar o header “Access-Control-Allow-Origin”, que ele não encontrou. O Chrome cancelou o pedido e o Angular deu-me um erro. O erro durante o processamento da solicitação POST é o motivo pelo qual as OPTIONS seriam bem-sucedidas, mas o POST falharia.

Em resumo, se você vir esse erro, pode ser que seu servidor não tenha retornado nenhum header em resposta à solicitação POST.

Isso também pode acontecer quando seus parâmetros estão errados na solicitação. No meu caso eu estava trabalhando com uma API que me enviou a mensagem

“Nenhum header ‘Access-Control-Allow-Origin’ está presente no recurso solicitado. A origem ‘null’ não tem access permitido. A resposta tinha o código de status HTTP 401.”

quando eu enviar um nome de usuário ou senha errada com a solicitação POST para fazer o login.

Ao invés de usar $ http.get (‘abc / xyz / getSomething’) tente usar $ http.jsonp (‘abc / xyz / getSomething’)

  return{ getList:function(){ return $http.jsonp('http://localhost:8080/getNames'); } } 

Se vocês estão tendo este problema em sails.js, apenas configure seu cors.js para include Autorização como o header permitido

 /*************************************************************************** * * * Which headers should be allowed for CORS requests? This is only used in * * response to preflight requests. * * * ***************************************************************************/ headers: 'Authorization' // this line here