使用角度设置 http 标头

Question

我正在尝试向我的所有 http 请求添加一个名为“access-token”的标头，如下所示：

var app= angular.module("MainModule", ["ngRoute"]);

app.run(function($http){
    $http.defaults.headers.common['access-token'] =ACCESSTOKEN;
})

在我的服务中：

 service.get= function (x) {
    console.log(ACCESSTOKEN)
    return $http({
      method: "GET",
      headers: {
        'Content-Type': 'application/json',
        'access-token': ACCESSTOKEN
      },
      crossDomain: true,
      url: GETSERVICE.replace("{id}", x),
      dataType: 'json'
    }).then(function (response) {
      if (response.data) {
        return response.data;
      } else {
        return $q.reject(response.data);
      }
    }, function (response) {
      return $q.reject(response.data);
    });

  }

问题是我在网络中看不到标头。只有 OPTION 请求没有我的标头。

我的后端 cors 配置如下：

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE, UPDATE, OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, access-token");

chain.doFilter(req, res);

有什么解决办法吗？

TY

编辑 1： 这是没有修改标头的 OPTION 请求

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: it-IT,it;q=0.9,en-US;q=0.8,en;q=0.7
Access-Control-Request-Headers: access-token
Access-Control-Request-Method: GET
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:8081
Origin: http://localhost:9080
Pragma: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

并修改标题（工作）：

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: it-IT,it;q=0.9,en-US;q=0.8,en;q=0.7
Access-Control-Request-Headers: access-token
Access-Control-Request-Method: GET
access-token: 1520963789861
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:8081
Origin: http://localhost:9080
Pragma: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

修改标头我在请求中有令牌

Answer 1

CORS 的存在是为了保护 API，以便随机客户端不会调用它们。

JavaScript 必须获得权限才能调用这些 API。浏览器应该完成与 CORS 相关的所有繁重工作。但唯一的要求是服务器应该为来自客户端的 OPTIONS 请求返回以下 HTTP 标头：

Access-Control-Allow-Origin: <Origin fetched from the request>
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, DELETE
Access-Control-Allow-Headers: <ACCESS-CONTROL-REQUEST-HEADERS fetched from request>

如果这不是一个选项，那么在客户端，可以添加以下代码来阻止所有 OPTIONS 请求，这会危及安全：

app.config(['$httpProvider', function ($httpProvider) {
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
  $httpProvider.defaults.headers.get = {};
}]);

见：https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Answer 2

该 OPTIONS 请求称为“preflight request”。它只检查您的客户端是否有权发送请求（当服务器具有配置的 CORS 时）。如果服务器响应肯定，那么您的浏览器会自动发送包含您提供的所有标头的完整请求。

Answer 3

$httpProvider 或 $http 模块：

//with the provider, in the app.config():
$httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';

$http.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';

Answer 4

好的，我会告诉你问题出在哪里。

编写我在跨域中调用的其余 api 的和蔼的人也在 OPTION 请求中检查了令牌的值进入空指针。

解决了为选项请求添加过滤器的问题。

所有人的TY