AngularJS没有检测到Access-Control-Allow-Origin头文件?

我在本地虚拟主机( http://foo.app:8000 )上运行一个angular度的应用程序。 它使用$http.post向另一个本地VirtualHost( http://bar.app:8000 )发出请求。

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

在Chrome开发者工具的networking选项卡中,我当然会看到OPTIONS请求,响应中包含标题:

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

但是,POST请求被取消,出现以下错误:

请求的资源上没有“Access-Control-Allow-Origin”标题。 Origin'http: //foo.app:8000 '因此不被允许访问。

有没有人经历过这个? Access-Control-Allow-Origin头部非常清楚地包含在OPTIONS请求的响应中,所以我不能为了让我知道为什么POST正在执行头部丢失。

Access-Control-Allow-Credentials也设置为true

这是一个本地开发铬的bug。 尝试其他浏览器。 然后它会工作。

对于那些想要使用Chrome的人来说,这是一个解决方法。 这个扩展允许你从任何来源请求带有AJAX的站点,因为它在响应中增加了'Access-Control-Allow-Origin: *'头部。

或者,您可以将此参数添加到您的Chrome启动器:– --disable-web-security 。 请注意,我只用于开发目的,而不是正常的“网上冲浪”。 有关参考,请参阅运行带标志的铬 。

最后要说明的是,通过安装第一段中提到的扩展名,可以轻松启用/禁用CORS。

我正在使用$ HTTP服务发送请求从angularjs 瓶运行在http://localhost:8090/和我不得不申请CORS,否则我得到请求错误,如“没有”访问控制允许来源“标题出现在请求的资源“

 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' 

我遇到了完全相同的问题。 对我来说,OPTIONS请求会通过,但POST请求会说“中止”。 这导致我相信浏览器从来没有做POST请求。 Chrome在请求标题中表示了类似“谨慎临时标题显示”的内容,但没有显示响应标题。 最后,我转向在Firefox上进行debugging,这导致我发现我的服务器正在响应一个错误,响应中没有CORS标头。 Chrome实际上正在接收响应,但不允许在networking视图中显示响应。

我今天遇到了这个问题 事实certificate,服务器上的一个错误(空指针exception)导致它无法创build响应,但它仍然生成了一个200的HTTP状态代码。由于200状态代码,Chrome期望有效的响应。 Chrome做的第一件事就是寻找“Access-Control-Allow-Origin”标题,它没有find。 Chrome然后取消了请求,Angular给了我一个错误。 处理POST请求期间的错误是OPTIONS成功的原因,但POST会失败。

总之,如果你看到这个错误,可能是你的服务器根本没有返回任何头文件来响应POST请求。

当请求中的参数错误时也会发生。 在我的情况下,我正在使用一个API给我发送消息

“No”Access-Control-Allow-Origin'标头出现在被请求的资源上,因此不允许Origin'null'访问,响应的HTTP状态码为401。

当我发送错误的用户名或密码与POST请求login。

CROS需要从服务器端解决。

根据需要创buildfilter以允许在web.xml中访问和添加filter

使用弹簧的例子:

filter类:

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

不要使用$ http.get ('abc / xyz / getSomething')尝试使用$ http.jsonp ('abc / xyz / getSomething')

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

如果你们在sails.js中遇到了这个问题,只需将你的cors.js设置为允许的头部就可以了

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