Question

我想了解为什么AngularJS $ http 服务不起作用且 fetch API有效。

以下是AngularJS代码：

const $http = angular.element(document.body).injector().get('$http')
$http({
  method: 'GET',
  url: 'http://192.168.1.126:8080/saiku/rest/saiku/admin/datasources/',
  headers: {
    'Authorization': 'Basic YWRtaW46YWRtaW4='
  }
})

这给了我这个错误：

angular.js：12845选项http://192.168.1.126:8080/saiku/rest/saiku/admin/datasources/ 403（）对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:8081＆＃39;因此不允许访问。响应的HTTP状态代码为403。

奇怪的是：

fetch('http://192.168.1.126:8080/saiku/rest/saiku/admin/datasources/', {
    method: 'GET',
    headers: {
         'Authorization': 'Basic YWRtaW46YWRtaW4='
    }
}).then((r) => r.json()).then(console.log)

给我正确答案

我知道这可能是一个CORS错误，但我已经在我的tomcat上添加了CORS过滤器，所以一切都应该工作（并且获取工作）。这是fetch或$ http中的错误吗？

Answer 1

当我写这个问题时，我找到了答案：

在我的AngularJS应用中，有一个配置文件设置了这个：

$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';

这个（以及其他标题）使请求成为预检，与CORS documentation对等：

[...]除了用户代理自动设置的标题（for   例如，连接，用户代理，or any of the other header with a name defined in the Fetch spec as a “forbidden header name”），   请求包括除了Fetch规范之外的任何标头   定义为“CORS安全请求标头”，它是   以下：


接受接受语言

内容的语言

内容类型（但请注意以下附加要求）

Last-Event-ID

DPR

保存数据

视口宽度

宽度

因此fetch API工作正常，因为它没有设置（If-Modified-Since）标头，$ http服务是。

浏览器提取有效，但AngularJS $ http服务有CORS错误

1 个答案: