如果响应中缺少 CORS 标头，则角度 $http 不返回 .error() 变量

Question

我正在通过 websockets 执行 $http.get 并且不知何故 .error 没有填充任何参数。我在 OSX 上使用 angular 1.3.5 和最新的 Chrome，本地主机别名为 mywebsite.com。

$http({method: 'GET', 'ws://mywebsite.com/resource'})
.success(function(response){ ... })
.error(function(err, status){
   console.log(err); <<< here err and status are null respectively 0 even the XHR Response logs 401 in console.
});

任何线索为什么这样做？无论它是什么错误代码，它都不会传递给错误回调。对于 2xx 响应，我确实得到了数据，一切都很好。

澄清一下，.error 回调会正常调用，但不会填充 err 和 status。

Answer 1

好吧，好吧，我发现了正在发生的事情。东西的组合。

首先，我使用的是 KOA，上面的角度将 KOA 作为 REST API。我还使用 koa-jwt 对用户进行身份验证并生成令牌。

现在 api 在子域上运行，甚至我通过 koa-cors 设置 CORS 以允许 * 访问。

问题是 koa-jwt 当令牌过期时，他们只是执行 this.throw(401)。 KOA 处理它的方式是立即终止后续中间件并以该错误退出。那个，不允许设置 koa-cors 标头，无论我将中间件放在哪里（在 koa-jwt 之前或之后）。

因此，优雅的解决方法是将我的顶级产量 next 包装在 try catch 中，并避免让 koa-jwt ctx.throw 传播。

在 Angular 方面，浏览器拒绝将 401 传递给 .error，抱怨它没有找到合适的 CORS 来允许它处理和移交响应:)。

app.use(cors({origin:"*", methods:'GET,HEAD,PUT,POST,DELETE,PATCH'}));  //allow all origins to the API. 
app.use ( function *(next){
    try {
      yield next;
    } catch (err) {
      this.status = err.status || 500;
      this.body = err.message;
      this.app.emit('error', err, this);
    }
});

... more middleware
// middleware below this line is only reached if jwt token is valid
app.use(jwt({secret: config.app.secret}));

允许来自 koa-jwt 的 this.trow(401) 会毁了你的一天。

Answer 2

我觉得你只是打错了，就这样写吧：

$http({method: 'GET', 'ws://mywebsite.com/resource', headers: headers})
.success(function(response){ ... })
.error(function(err, status){
   console.log(err);
});

但是作为最佳实践，我会这样做

var request = {
   method: 'GET',
   url: 'ws://mywebsite.com/resource',
   headers: {//insert here header you want, put Origin header only for example purposes
      Origin: 'ws://mywebsite.com/resource'
   }
}

$http(request)
.success(function(response){ ... })
.error(function(err, status){
   console.log(err);
});

如果错字不是错误（您可能复制了代码），请查看AngularJS $http error function never called