使用Restangular的Ionic App的Node Express潛在的CORS問題

Question

我有一個Ionic應用程序，我正在使用restangular與節點快速應用程序進行通信。

當我將節點表示應用程序配置為使用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（例如DELETE）或HTTP以外的HTTP動詞的一個示例。使用自定義標頭。”因此，我不確定為什么這樣做嗎？

我將Ionic App和Node Express App重新配置為使用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 App執行GET請求時，我在Chrome調試器中的“網絡”下看到一個OPTIONS請求被取消（請求狀態）。 這告訴我，我需要在Node Express App端啟用cors預檢（但是，當服務器配置為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）的插入。 現在可以使用了。

那么，為什么在配置了http地址卻不處理由於在Ionic App端插入自定義標頭而期望的飛行前請求時，Node Express應用程序仍能工作？

當Node Express App配置有https地址（以及Ionic App端）時，為什么我不處理OPTIONS請求？ 我配置cors的方式不正確嗎？ 我想念什么？

我認為這是一個問題，因為當為https地址配置了Ionic App端的自定義標頭后，就可以消除它了。

我需要做什么才能使它正常工作？

UPDATE

我嘗試使用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（ 減去自訂標頭）消失了，得到了良好的回應（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');
});

從本質上講，我需要發送一個沒有自定義標頭的“ 初步 ” GET請求。 GET請求可能是對我的節點快速服務器上的任何對象的請求。 在此“ 初步 ” GET請求之后，我可以在其中帶有自定義標頭的情況下執行GET請求。

特別是在服務器端，我看到以下內容：

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

如果不執行此“ 初步 ”獲取請求，我的Ionic App中的OPTIONS請求將中止-狀態碼= -1-通常表示該請求已中止，並且永遠不會離開Ionic App一方。

我仍然不明白為什么我需要這個“ 初步 ” GET請求，但這對我有用。