为angularjs REST调用设置HTTP标头

Question

我尝试使用以下代码为所有REST调用设置HTTP标头：

app.factory('authInterceptor', function ($rootScope, $q, $window) {
  return {
    request: function (config) {
      config.headers = config.headers || {};
      config.headers.Authorization = '12345678';
      return config;
    },
    response: function (response) {
      if (response.status === 401) {
        // handle the case where the user is not authenticated
      }
      return response || $q.when(response);
    }
  };
});

app.config(function ($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
});

我目前没有在服务器上启用任何授权。 当我遗漏这条线时，＆＃34; config.headers.Authorization =＆＃39; 12345678＆＃39;;＆＃34; ，然后REST调用运行良好，我得到我的结果。在JS控制台中，我看到了

GET http://localhost:8080/rest/club/1 [HTTP/1.1 200 OK 7ms]

但是当我把这一行设置为Header字段时，我在javascript控制台中看到了以下请求

OPTIONS http://localhost:8080/rest/club/1 [HTTP/1.1 200 OK 2ms]

为什么设置授权标题会改变我的方法＆＃34; GET＆＃34;到＆＃34; OPTIONS＆＃34;？我如何设置自定义标题，我的请求仍然有效？

将其更改为

config.headers["X-Testing"] = '12345678';

有相同的结果。

编辑：

我尝试了答案，我在服务器中设置了以下HTTP标头：

response.getHeaders().putSingle("Access-Control-Allow-Origin", "http://localhost");
response.getHeaders().putSingle("Access-Control-Allow-Header", "X-Testing");
response.getHeaders().putSingle("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
response.getHeaders().putSingle("Access-Control-Max-Age", 1728000);

我的REST服务器在端口8080上运行，端口8000上的html / JS的Web服务器（最初使用file：// ...但由于Origin为null而移动到单独的Web服务器）

response.getHeaders().putSingle("Access-Control-Allow-Origin", "*");

或

response.getHeaders().putSingle("Access-Control-Allow-Origin", "http://localhost:8000");

也没有工作。

我必须在OPTIONS响应中返回任何内容吗？我尝试使用与GET相同的内容200 OK，但我也尝试了204 No Content。

第二次编辑：

这是firefox为OPTIONS方法发送和接收的内容：

Answer 1

您需要在REST服务中启用CORS。正如MDN中所述，一旦添加了自定义标头，http协议就会指定执行预检，

  

预检请求

     

与简单请求（如上所述）不同，首先是“预检”请求   通过OPTIONS方法向该资源发送HTTP请求   其他域，以确定实际请求是否安全   发送。跨站请求是这样的预检，因为它们可能   对用户数据有影响。特别是，请求是   预防如果：

     

它使用GET，HEAD或POST以外的方法。此外，如果使用POST   使用除以外的Content-Type发送请求数据   application / x-www-form-urlencoded，multipart / form-data或text / plain，   例如如果POST请求使用XML向服务器发送XML有效负载   application / xml或text / xml，然后请求被预检。它设定   请求中的自定义标头（例如，请求使用标头，例如   X-PINGOTHER）

除了启用CORS之外，您还需要添加Access-Control-Allow-Headers标头标记以接受您的自定义标头（对于OPTIONS响应）。这在MDN示例中可见，

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER
Access-Control-Max-Age: 1728000
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

<强>更新

如评论中所述，OPTION响应的Access-Control-Allow-Headers缺少最后一个“s”。