AngularJs 获得授权请求

Posted 2023-03-04

【中文标题】AngularJs 获得授权请求

【英文标题】：AngularJs get request with authorization

【发布时间】：2019-05-17 03:11:57

【问题描述】：

我正在尝试发出需要身份验证的 get 请求，但它没有发出 GET 请求，正如我在 chrome 的网络选项卡中看到的那样，它发出 OPTIONS 请求并因此出现 404 错误？

      $http.defaults.headers.common['Authorization'] = 'Basic ' + _this.auth_token;

      $http.get('http://localhost:2337/getFeedbackForm/abcd?format=json')
       .success(function (data, status, headers) 

           blockUI.stop();

           $scope.feedbackForm = data;

       )
       .error(function (data, status, header, config) 

           blockUI.stop();

           $scope.feedbackForm = data;

       );

为什么它像 PUT 或 POST 一样处理 GET 请求？

【问题讨论】：

Authorization 标头不是CORS Safe-listed header。它将触发一个必须有成功响应的 OPTIONS 请求，否则 XHR 将被浏览器阻止。

【参考方案1】：

问题是后端的 CORS。

有关 CORS 的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

您的后端需要在所有端点上接受“OPTION”类型的 HTTP 请求 + 将标头添加到您的响应中

Access-Control-Allow-Origin

更多关于标题：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

【参考方案2】：

您的 API 请求看起来构建正确，因此您的 Angular 代码不是问题。

如果你看到 OPTIONS 请求出去了，但没有 GET 请求，说明 OPTIONS 请求失败，所以浏览器没有发送 GET 请求。 MDN docs on preflighted requests 解释了这种行为：

与“简单请求”（上面讨论过）不同，“预检”请求首先通过 OPTIONS 方法向另一个域上的资源发送 HTTP 请求，以确定实际请求是否可以安全发送。跨站点请求是这样预检的，因为它们可能会对用户数据产生影响。

如果您的服务器没有为运行 Angular 应用的域启用 CORS，这意味着它不接受请求，因此浏览器不会发送 GET 请求。

要解决这个问题，您必须在运行于 localhost:2337 的 API 上启用 CORS。由于我不知道您的服务器是内置的，这里有一些选项：

ExpressJS using the cors() middleware Hapi.js Ruby on Rails by configuring Rack::Cors middleware

您可以先尝试将其更改为允许所有请求，然后按域或路由缩小范围。

基本上，您的服务器需要为 OPTIONS 请求返回一个标头，其中包括请求域，或使用通配符星号的所有内容：

Access-Control-Allow-Origin: *

关于MDN: HTTP Headers Access-Control-Allow-Origin的更多信息。