使用 Restangular 的 Ionic App 的 Node Express 潜在 CORS 问题

Question

我有一个 Ionic 应用程序，我正在使用 restangular 与 node express 应用程序通信。

当我将 node express 应用程序配置为使用 http 时，一切正常。

Ionic App 端：

RestangularProvider.setBaseUrl('http://11.22.33.44:3000');

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

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

Node Express App 端：

var app = express();
app.use(cors());
app.get('/Admin, function(req, res) {
    console.log(admin-get');
    res.send(200);
});

我期待我需要处理飞行前请求，因为 cors 节点模块指出：“‘复杂’CORS 请求的一个示例是使用 GET/HEAD/POST 以外的 HTTP 动词（例如删除）或使用自定义标题。”所以我不确定为什么会这样？

我重新配置 Ionic 应用程序和 Node Express 应用程序以使用 https 地址而不是 http：

Ionic App 端：

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

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

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

Node Express App 端：

var app = express();
app.use(cors());
app.get('/Admin, function(req, res) {
    console.log(admin-get');
    res.send(200);
});

当 Ionic 应用程序执行 GET 请求时，我在 Chrome 调试器的“网络”下看到一个 OPTIONS 请求被取消（请求的状态）。这告诉我，我需要在我的 Node Express 应用端启用 cors pre-flight（尽管为什么当服务器配置为 http 而不是 https 时我没有看到这个错误？）。

所以我根据 express js cors 模块文档在 Node Express App 端尝试了以下操作：

app.options('Admin', cors()); // enable pre-flight request 
app.get('/Admin', cors(), function(req, res) {
    console.log('admin-get');
    res.send(200);
});

我在 Chrome 调试器的“网络”下看到了同样的情况——一个被取消的 OPTIONS 请求（请求的状态）。我也试过了

app.options('*', cors());

结果相同。

然后我删除了在 Ionic App 端插入的自定义标头（x-serialnumber）。现在可以了。

那么，由于在 Ionic App 端插入了自定义标头，为什么 Node Express 应用程序在配置了 http 地址而不处理我期望的飞行前请求时工作？

当 Node Express 应用程序配置了 https 地址（以及 Ionic 应用程序端）时，为什么我不处理 OPTIONS 请求？我配置cors的方式不正确吗？我错过了什么？

我认为这是一个 cors 问题，因为当 Ionic App 端配置为 https 地址并且它可以工作时，我可以消除它们的自定义标头。

我需要做什么才能让它工作？

更新

我尝试使用 Angular JS $http 而不是 Restangular。我得到了以下有效的结果：

$http({
  method: 'GET',
  url: theUrl
}).then(function successCallback(response) {
  $http({
    method: 'GET',
    url: theUrl,
    headers: {
      'x-serialnumber' : deviceStore.serialNumber
    }
  }).then(function successCallback(response) {
  }, function errorCallback(response) {
  });
}, function errorCallback(response) {
});

我在 Chrome 网络调试器中看到第一个 GET（minus 自定义标头）发出，我得到了很好的响应（200），然后是 OPTIONS 请求，我也得到了很好的响应（ 200），然后是一个带有自定义标头的良好 GET（得到良好的响应）。

如果我不执行此第一个 GET 请求减去自定义标头，则 OPTIONS 请求在 Angular JS Ionic App 端中止，状态为 -1。

注意：我可以将初始 $http 请求（减去自定义标头）更改为 Restangular 请求（减去自定义标头）

为什么这个初始 GET 减去所需的自定义标头（即 GET（减去自定义标头）| OPTIONS | GET（带有自定义标头））？

我不明白什么？

Answer 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

如果不执行此“初步”获取请求，我的 Ionic 应用程序中的 OPTIONS 请求将中止 - 状态代码 = -1 - 通常意味着请求已中止并且会永远不要离开 Ionic App。

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