AngularJS not detecting Access-Control-Allow-Origin header

Question

I am running an angular app on a local virtualhost  http   foo app 8000   It is making a request to another local VirtualHost  http   bar app 8000  using  http post    http post  http   bar app 8000 mobile reply   reply   withCredentials  true      In the Network tab of Chrome Developer Tools I of course see the OPTIONS request  and the response includes the header   Access-Control-Allow-Origin  http   foo app 8000   However  the POST request is cancelled with the following error      No  Access-Control-Allow-Origin  header is present on the requested resource  Origin  http   foo app 8000  is therefore not allowed access    Has anyone experienced this  The Access-Control-Allow-Origin header is very plainly included in the response of the OPTIONS request  so I can t for the life of me figure out why the POST is acting the header was missing   Access-Control-Allow-Credentials is also set to true

User · Answer

I was sending requests from angularjs using  http service to bottle running on http   localhost 8090  and I had to apply CORS otherwise I got request errors like  No  Access-Control-Allow-Origin  header is 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

User · Answer

Instead of using  http get  abc xyz getSomething   try to use    http jsonp  abc xyz getSomething          return              getList function                    return  http jsonp  http   localhost 8080 getNames

User · Answer

It s a bug in chrome for local dev  Try other browser  Then it ll work

User · Answer

If you guys are having this problem in sails js just set your cors js to include Authorization as the allowed header   x000D   x000D                                                                               x000D                                                                                 x000D      Which headers should be allowed for CORS requests  This is only used in    x000D      response to preflight requests                                             x000D                                                                                 x000D                                                                                 x000D   x000D    headers   Authorization     this line here x000D   x000D   x000D

User · Answer

CROS needs to be resolved from server side   Create Filters as per requirement to allow access and add filters in web xml  Example using spring   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    lt filter gt       lt filter-name gt simpleCORSFilter lt  filter-name gt       lt filter-class gt          com abc web controller general SimpleFilter      lt  filter-class gt   lt  filter gt   lt filter-mapping gt       lt filter-name gt simpleCORSFilter lt  filter-name gt       lt url-pattern gt    lt  url-pattern gt   lt  filter-mapping gt

User · Answer

There s a workaround for those who want to use Chrome  This extension allows you to request any site with AJAX from any source  since it adds  Access-Control-Allow-Origin     header to the response   As an alternative  you can add this argument to your Chrome launcher  --disable-web-security  Note that I d only use this for development purposes  not for normal  web surfing   For reference see Run Chromium with Flags   As a final note  by installing the extension mentioned on the first paragraph  you can easily enable disable CORS

User · Answer

It can also happen when your parameters are wrong in the request  In my case I was working with a API that sent me the message    No  Access-Control-Allow-Origin  header is present on the requested resource  Origin  null  is therefore not allowed access  The response had HTTP status code 401     when I send wrong username or password with the POST request to login

User · Answer

I just ran into this problem today  It turned out that a bug on the server  null pointer exception  was causing it to fail in creating a response  yet it still generated an HTTP status code of 200  Because of the 200 status code  Chrome expected a valid response  The first thing that Chrome did was to look for the  Access-Control-Allow-Origin  header  which it did not find  Chrome then cancelled the request  and Angular gave me an error  The bug during processing the POST request is the reason why the OPTIONS would succeed  but the POST would fail   In short  if you see this error  it may be that your server didn t return any headers at all in response to the POST request

User · Answer

I experienced this exact same issue  For me  the OPTIONS request would go through  but the POST request would say  aborted   This led me to believe that the browser was never making the POST request at all  Chrome said something like  Caution provisional headers are shown  in the request headers but no response headers were shown  In the end I turned to debugging on Firefox which led me to find out my server was responding with an error and no CORS headers were present on the response  Chrome was actually receiving the response  but not allowing the response to be shown in the network view

[angularjs] AngularJS not detecting Access-Control-Allow-Origin header?

Examples related to angularjs

Examples related to angularjs-http