AngularJS not detect Access-Control-Allow-Origin header?

Question

I am running an angular application on a local virtual host ( http://foo.app:8000 ). It sends a request to another local VirtualHost ( http://bar.app:8000 ) using $http.post .

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

On the Network tab in the Chrome Developer Tools, of course, I see an OPTIONS request, and the response includes a heading:

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

However, the POST request is canceled with the following error:

No header "Access-Control-Allow-Origin" is present on the requested resource. The origin of http://foo.app:8000 'is therefore not allowed.

Has anyone experienced this? The Access-Control-Allow-Origin header is very clearly included in the response of the OPTIONS request, so I can’t understand for life why POST does not work, the header is missing.

Access-Control-Allow-Credentials also set to true .

Answer 1

This is a bug in chrome for a local developer. Try a different browser. Then it will work.

Answer 2

A workaround for those who want to use Chrome. This extension allows you to request any site with AJAX from any source, as it adds the header 'Access-Control-Allow-Origin: *' in the response.

Alternatively, you can add this argument to your Chrome launcher: --disable-web-security . Please note that I would use this only for development purposes, and not for regular "web surfing". For help, see Run Chromium with Flags .

As a final note, by installing the extension mentioned in the first paragraph, you can easily enable / disable CORS.

Answer 3

I sent requests from angularjs using the $ http service for bottle running on http://localhost:8090/ , and I had to apply CORS , otherwise I got request errors such as the No-header Access-Control-Allow- Origin "present on the requested resource"

 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' 

Answer 4

I had the same problem. For me, the OPTIONS request will pass, but the POST request will be “canceled”. This made me believe that the browser never made a POST request at all. Chrome said something like “Cautions preliminary headers are shown” in the request headers, but no response headers were shown. In the end, I turned to debugging in Firefox, which made me find out that my server answered with an error and there were no CORS headers in the response. In fact, Chrome received the answer, but did not allow the response to be displayed in the network view.

Answer 5

CROS needs to be fixed on the server side.

Create filters as required to allow access and add filters to web.xml

Spring usage example:

Filter class:

 @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:

 <filter> <filter-name>simpleCORSFilter</filter-name> <filter-class> com.abc.web.controller.general.SimpleFilter </filter-class> </filter> <filter-mapping> <filter-name>simpleCORSFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> 

Answer 6

Today I ran into this problem. It turned out that an error on the server (exception from the null pointer) leads to a failure to create the response, but it still generates an HTTP status code of 200. Due to the 200 status code, Chrome expects a valid response. The first thing Chrome did was search for the “Access-Control-Allow-Origin” header, which he did not find. Then Chrome canceled the request, and Angular gave me an error. An error processing the POST request causes OPTIONS to succeed, but the POST will fail.

In short, if you see this error, your server may not have returned any headers at all in response to a POST request.

Answer 7

This can also happen when your parameters are erroneous in the request. In my case, I was working with an API that sent me a message

The requested resource contains the No-Access-Control-Allow-Origin header. Consequently, the source 'null' does not have permission. The response had an HTTP status code of 401. "

when I send the wrong username or password with a POST request for login.

Answer 8

Instead of using $ http.get ('abc / xyz / getSomething') try using $ http.jsonp ('abc / hoog / getSomething')

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

Answer 9

If you have this problem in sails.js, just set authorization for your cors.js as an allowed header

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