angularjs - AngularJS 没有检测到 Access-Control-Allow-Origin 标头？

Question

我在本地虚拟主机（http://foo.app:8000）上运行一个角度应用程序。它正在向另一个本地 VirtualHost ( http://bar.app:8000 ) 使用$http.post.

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

在 Chrome 开发人员工具的网络选项卡中，我当然会看到 OPTIONS 请求，响应包括标题：

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

但是，POST 请求被取消并出现以下错误：

请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“ http://foo.app:8000 ”。

有没有人经历过这个？标Access-Control-Allow-Origin头非常明显地包含在 OPTIONS 请求的响应中，因此我无法终生弄清楚为什么 POST 正在执行标头丢失。

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

Answer 1

对于本地开发人员来说，这是 chrome 中的一个错误。尝试其他浏览器。然后它会工作。

Answer 2

对于那些想要使用 Chrome 的人来说，有一个解决方法。此扩展允许您从任何来源使用 AJAX 请求任何站点，因为它会'Access-Control-Allow-Origin: *'在响应中添加标头。

作为替代方案，您可以将此参数添加到您的 Chrome 启动器：--disable-web-security. 请注意，我只会将其用于开发目的，而不是用于正常的“网上冲浪”。有关参考，请参阅使用标志运行 Chromium。

最后一点，通过安装第一段中提到的扩展，您可以轻松启用/禁用 CORS。

Answer 3

我正在使用 $http 服务从 angularjs 发送请求以运行瓶http://localhost:8090/，我必须应用CORS ，否则我收到请求错误，例如“请求的资源上不存在‘Access-Control-Allow-Origin’标头”

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

我遇到了同样的问题。对我来说，OPTIONS 请求会通过，但 POST 请求会说“已中止”。这让我相信浏览器根本没有发出 POST 请求。Chrome 在请求标头中表示“警告临时标头已显示”，但未显示响应标头。最后，我转向在 Firefox 上进行调试，这导致我发现我的服务器响应错误并且响应中没有 CORS 标头。Chrome 实际上正在接收响应，但不允许响应显示在网络视图中。

Answer 5

CROS 需要从服务器端解决。

根据要求创建过滤器以允许访问并在 web.xml 中添加过滤器

使用弹簧的示例：

过滤器类别：

@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

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

简而言之，如果您看到此错误，可能是您的服务器在响应 POST 请求时根本没有返回任何标头。

Answer 7

当您的请求中的参数错误时，也会发生这种情况。就我而言，我正在使用一个向我发送消息的 API

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

当我使用 POST 请求发送错误的用户名或密码以登录时。

Answer 8

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

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

Answer 9

如果你们在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