Question

我正在研究SPA MEAN app，我正在针对Apiary模拟API开发它，它具有以下CORS标头集：

Access-Control-Allow-Methods → OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT
Access-Control-Allow-Origin → *
Access-Control-Max-Age → 10

一切正常，角度可以使用$ http角度服务访问它就好了。但是，在添加Stormpath Angular SDK之后，所有这些请求都会失败，并显示以下错误：

XMLHttpRequest cannot load https://xxx.apiary-mock.com/workshops?type=favourite. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://localhost:8000' is therefore not allowed access.

我试图弄清楚为什么这些请求被拒绝以及这些标题被添加到什么时候？

Answer 1

每当您从一个域（例如localhost:8080）提供SPA客户端并且您希望该客户端访问另一个域（xxx.apiary-mock.com）上的API时，浏览器需要添加服务器域CORS标题正确无误。

如果客户端和服务器域不同，则浏览器的安全模型要求服务器通过设置Access-Control-Allow-Origin响应标头（以及其他相关的Access-Control-*标头来指示哪些客户端域可以访问服务器））。

Answer 2

感谢您找到此问题。 Stormpath Angular SDK确实有一个拦截器，可以为所有请求设置withCredentials: true标志。请参阅代码here。

目的是确保始终发送我们的身份验证Cookie，即使在跨域情况下也是如此。但是，如果您的Angular应用程序正在与不需要发送cookie的其他API进行通信，我可以看到这会有什么问题。

作为一种解决方法，您只需添加另一个拦截器即可覆盖我们的拦截器：

angular.module('myapp', [
  'stormpath',
  'stormpath.templates'
]).config(function ($httpProvider) {
  $httpProvider.interceptors.push(function() {
    return {
      request: function(config) {
        config.withCredentials=false;
        return config;
      }
    };
  });
});

我创建了一个问题来讨论更好的解决方案：https://github.com/stormpath/stormpath-sdk-angularjs/issues/72

Answer 3

我有解决方法将这些标题添加到养蜂场：

+ Response 200 (application/json)

    + Headers

            Access-Control-Allow-Credentials: true
            Access-Control-Allow-Methods: OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECT
            Access-Control-Allow-Origin: http://localhost:8000

我仍在努力弄清楚Stormpath在哪里需要这些标题。

添加Stormpath Angular SDK后出现CORS问题

3 个答案: