AngularJS no detecta el encabezado Access-Control-Allow-Origin?

Estoy ejecutando una aplicación angular en un servidor virtual local ( http://foo.app:8000 ). Está realizando una solicitud a otro VirtualHost local ( http://bar.app:8000 ) utilizando $http.post .

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

En la pestaña Red de Chrome Developer Tools, por supuesto, veo la solicitud OPTIONS y la respuesta incluye el encabezado:

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

Sin embargo, la solicitud POST se cancela con el siguiente error:

Ningún encabezado ‘Access-Control-Allow-Origin’ está presente en el recurso solicitado. El origen ‘ http://foo.app:8000 ‘ no está, por lo tanto, permitido.

Alguien ha experimentado esto? El encabezado Access-Control-Allow-Origin está muy claramente incluido en la respuesta de la solicitud de OPTIONS, por lo que no puedo entender por qué el POST está actuando sin el encabezado.

Access-Control-Allow-Credentials también se establece en true .

Es un error en Chrome para el desarrollador local. Prueba con otro navegador. Entonces funcionará.

Hay una solución para aquellos que quieren usar Chrome. Esta extensión le permite solicitar cualquier sitio con AJAX desde cualquier fuente, ya que agrega 'Access-Control-Allow-Origin: *' encabezado 'Access-Control-Allow-Origin: *' a la respuesta.

Como alternativa, puede agregar este argumento a su --disable-web-security Chrome: --disable-web-security . Tenga en cuenta que solo usaría esto para fines de desarrollo, no para la “navegación web” normal. Para referencia, vea Ejecutar Chromium con Flags .

Como nota final, al instalar la extensión mencionada en el primer párrafo, puede habilitar / deshabilitar CORS fácilmente.

Estaba enviando solicitudes desde angularjs usando el servicio $ http a la botella que se ejecuta en http://localhost:8090/ y tuve que aplicar CORS; de lo contrario, recibí errores de solicitud como “No ‘el encabezado Access-Control-Allow-Origin’ está presente en el 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' 

Experimenté este mismo problema. Para mí, la solicitud de OPTIONS pasaría, pero la solicitud POST diría “abortada”. Esto me llevó a creer que el navegador nunca hizo la solicitud POST. Chrome dijo algo así como “Se muestran encabezados provisionales de precaución” en los encabezados de solicitud, pero no se muestran encabezados de respuesta. Al final recurrí a la depuración en Firefox, lo que me llevó a descubrir que mi servidor respondía con un error y que no había encabezados CORS en la respuesta. En realidad, Chrome recibía la respuesta, pero no permitía que la respuesta se mostrara en la vista de red.

CROS debe resolverse desde el lado del servidor.

Cree filtros según los requisitos para permitir el acceso y agregar filtros en web.xml

Ejemplo usando la spring:

Clase de filtro:

 @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 /*  

Me encontré con este problema hoy. Resultó que un error en el servidor (excepción de puntero nulo) hacía que fallara al crear una respuesta, pero aún generaba un código de estado HTTP de 200. Debido al código de estado 200, Chrome esperaba una respuesta válida. Lo primero que hizo Chrome fue buscar el encabezado ‘Access-Control-Allow-Origin’, que no encontró. Chrome luego canceló la solicitud y Angular me dio un error. El error durante el procesamiento de la solicitud POST es la razón por la cual las OPCIONES tendrían éxito, pero el POST fallaría.

En resumen, si ve este error, es posible que su servidor no haya devuelto ningún encabezado en respuesta a la solicitud POST.

También puede suceder cuando sus parámetros son incorrectos en la solicitud. En mi caso, estaba trabajando con una API que me envió el mensaje

“No está presente el encabezado ‘Access-Control-Allow-Origin’ en el recurso solicitado. Por lo tanto, el origen ‘nulo’ no tiene acceso permitido. La respuesta tenía el código de estado HTTP 401.”

cuando envío un nombre de usuario o contraseña incorrectos con la solicitud POST para iniciar sesión.

En lugar de usar $ http.get (‘abc / xyz / getSomething’) intente usar $ http.jsonp (‘abc / xyz / getSomething’)

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

Si ustedes están teniendo este problema en sails.js, simplemente configuren sus cors.js para incluir Authorization como el encabezado permitido

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