角度 $http.get / restangular 调用失败答案

【问题标题】：angular $http.get / restangular call fails角度 $http.get / restangular 调用失败
【发布时间】：2017-04-07 17:31:43
【问题描述】：

我有一个离子应用程序（使用 Angular js）。我正在尝试使用restangular api调用我的本地服务器（节点快递）（也尝试使用$http.get）。

我将基本 url 设置为

RestangularProvider.setBaseUrl('https://localhost:3000');

我定义了一个拦截器来添加自定义标头：

interceptors.serialNumber = function (element, operation, what, url, headers, query) {
  return {
    headers: angular.extend({
      'x-serialnumber': deviceStore.serialNumber
    }, headers)
  };
};

我尝试了以下 restangular 调用：

Restangular.one('Admin').get()
     .then(function (data) {
        console.log(data);
       });
     }, function (error) {
       console.log(error);
     });

以及以下使用 $http 调用：

$http({
        method: 'GET',
        url: 'https://localhost:3000/Admin',
        headers: {
          'Content-Type': 'application/json',
          'x-serialnumber': '000000000'   
        }
      }).then(function (data) {
        console.log(data);
      }, function (error) {
        console.log(error);
      });

我总是得到 data=null | 的错误条件。状态=-1 | statusText=""

我在服务器端看不到任何请求。它立即进入失败案例。

如果我删除自定义标头，我会在服务器端看到请求并获得良好的响应（即 200）。

在服务器端，我使用的是 cors 模块： var app = express(); app.use(cors());

【问题讨论】：

所有证据都指向 deviceStore.serialNumber 抛出空指针异常（deviceStore 未定义）
感谢您的回复 Andonaeus。我验证它不为空。另外 $http 情况下，我对标头值（x-serialnumber）进行了硬编码，并得到与矩形情况相同的错误
如果您使用的是 CORS，是否已将自定义标头添加到允许的标头列表中？
@Amy 是对的，你需要添加一个例外（不知道为什么我以为我们在谈论 CSRF，咖啡不够）
感谢您的回复。我在我的节点 express 服务器上尝试了以下操作（使用 expressjs\cors 模块）： var corsOptions = { allowedHeaders: 'x-serialnumber' }; app.use(cors(corsOptions));

标签： javascript angularjs http cors restangular

【解决方案1】：

好吧，我需要做的是：

$http({
  method: 'GET',
  url: 'https://example.com/DUMMY'
}).then(function successCallback(response) {
  $http({
    method: 'GET',
    url: 'https://example.com',
    headers: {
      'x-serialnumber': deviceStore.serialNumber
    }
  }).then(function successCallback(response) {
    console.log('SUCCESS');
  }, function errorCallback(response) {
    console.log('FAILURE');
  });
}, function errorCallback(response) {
  console.log('FAILURE');
});

本质上，我需要发送一个带有 NO 自定义标头的“preliminary”GET 请求。 GET 请求可以是我的节点快递服务器上的任何东西。在这个“preliminary” GET 请求之后，我可以执行带有自定义标头的 GET 请求。

特别是在服务器端，我看到以下内容：

GET /DUMMY 200 10ms - 2b
OPTIONS / 204 1ms
GET / 200 13ms - 1.03kb

如果不执行这个“preliminary”获取请求，我的 Ionic 应用程序中的 OPTIONS 请求将abort - status code = -1 - 通常意味着请求被中止并且会永远不要离开 Ionic App。

我仍然不明白为什么我需要这个“初步”GET请求，但这对我有用。

【讨论】：