從ExtJS請求node.js時發生CORS問題請求或響應頭不正確？

Question

我對在我們的網絡中的兩個不同域之間向Nodejs服務器發出ExtJS AJAX請求存在問題，並會很感激任何幫助。從ExtJS客戶端嘗試同時使用http和https時，響應失敗，但從本地通過http返回的Curl返回200 OK且數據正確。我們正在處理內容類型application/json。

ExtJS的onReady功能已經啓用CORS：

Ext.onReady(function() { 
    Ext.Ajax.cors = true; 
    Ext.Ajax.useDefaultXhrHeader = false; 
    ... (code removed) 
}) 

從將正確地創建ExtJS的數據存儲已知的工作URL我的ExtJS的客戶端測試（帶回200 OK）：

Ext.create('Ext.data.Store', { 
    id   : 'countryStore', 
    model  : 'country', 
    autoLoad : true, 
    autoDestroy: true, 
    proxy: { 
     type: 'rest', 
     url : 'https://restcountries.eu/rest/v1/all', 
     }, 
     reader: { 
      type   : 'json', 
      headers: {'Accept': 'application/json'}, 
      totalProperty : 'total', 
      successProperty: 'success', 
      messageProperty: 'message' 
     } 
}); 

然而，通過

http嘗試我們的服務器的NodeJS的請求時：

Ext.create('Ext.data.Store', { 
    id   : 'circuits', 
    model  : 'circuit', 
    autoLoad : true, 
    autoDestroy: true, 
    proxy: { 
     type: 'rest', 
     url : 'http://ourNodeJsServerDomain:5500/v3/circuits', 
     }, 
     reader: { 
      type   : 'json', 
      headers: {'Accept': 'application/json'}, 
      totalProperty : 'total', 
      successProperty: 'success', 
      messageProperty: 'message' 
     } 
}); 

返回Chrome的控制檯如下：

Mixed Content: The page at 'https://ourExtJsDevClientSide' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ourNodeJsServerDomain:5500/v3/circuits?_dc=1430149427032&page=1&start=0&limit=50'. This request has been blocked; the content must be served over HTTPS.

現在，嘗試過https時：

火狐顯示：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ourNodeJsServerDomain:5500/v3/circuits?_dc=1430151516741&page=1&start=0&limit=50. This can be fixed by moving the resource to the same domain or enabling CORS.

，並請求頭沒有按」 t顯示「application/json」，這是一個問題嗎？：

Accept 
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Encoding 
gzip, deflate 
Accept-Language 
en-US,en;q=0.5 
Host  
ourNodeJsServerDomain:5500 
Origin 
https://ourExtJsDevClientSide 
Referer 
https://ourExtJsDevClientSide 
User-Agent 
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:37.0) Gecko/20100101 Firefox/37.0 

然後我和捲曲想看看有什麼反應是幫助調試

上http給出了一個200 OK應答，但訪問控制允許來源是不確定的，即使我們將其定義爲"*" ：

curl http://ourNodeJsServerDomain:5500/v3circuits?_limit=1 -v 
> GET /v3/circuits?_limit=1 HTTP/1.1 
> User-Agent: curl/7.37.1 
> Host: ourNodeJsServerDomain:5500 
> Accept: */* 
> 
< HTTP/1.1 200 OK 
< X-Powered-By: Express 
< Access-Control-Allow-Origin: undefined 
< Access-Control-Allow-Methods: GET 
< Access-Control-Allow-Headers: Content-Type 
< Content-Type: application/json; charset=utf-8 
< Content-Length: 1126 
< ETag: W/"MlbRIlFPCV6w7+PmPoVYiA==" 
< Date: Mon, 27 Apr 2015 16:24:18 GMT 
< Connection: keep-alive 
< 
[ 
    { *good json data returned here* } ] 

然後當我嘗試通過https

curl https://ourNodeJsServerDomain:5500/v3/circuits?_limit=1 -v 
* Server aborted the SSL handshake 
* Closing connection 0 
curl: (35) Server aborted the SSL handshake 

捲曲

我們已經啓用了CORS我們的服務器的NodeJS上：

router 
    .all('*', function(req, res, next){ 
     res.setHeader('Content-Type', 'application/json'); 
     // res.setHeader("Access-Control-Allow-Origin", req.headers.origin); 
     // console.log('\n\nreq.headers.origin ===================== ' + req.headers.origin); 
     //I have tried allowing all * via res.SetHeader and res.header and neither is defining the Access-Control-Allow-Origin properly when curling 
     //res.setHeader("Access-Control-Allow-Origin", "*"); 
     res.header("Access-Control-Allow-Origin", "*"); 
     // res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
     res.header('Access-Control-Allow-Methods', 'GET'); 
     res.header('Access-Control-Allow-Headers', 'Content-Type'); 

我試圖在我的思維過程進行詳細說明，我願意嘗試新的方法來確定如何認識和解決這個問題。

*解*

的問題是從瀏覽器混合內容。我們的客戶端用戶界面位於https（安全）上，而我們正在從nodejs服務器請求http（不安全）內容。我們需要允許我們的nodejs服務器運行在https

我們generated SSL certifications並將它們實現到我們的nodejs服務器上。

內碼的NodeJS，我們啓用CORS與CORS模塊和運行的HTTP和HTTPS服務器：

// enable CORS for all requests 
var cors = require('cors'); 
app.use(cors()); 

// for certifications 
var credentials = { 
    key: fs.readFileSync('our.key'), 
    cert: fs.readFileSync('our.crt') 
}; 

var httpServer = http.createServer(app); 
var httpsServer = https.createServer(credentials, app); 

httpServer.listen(port, function() { 
console.log('HTTP server listening on port ' + port); 
}); 

httpsServer.listen(httpsPort, function() { 
    console.log('HTTPS server listening on port ' + httpsPort); 
}); 

Answer 1

似乎是在你的服務器上都CORS和HTTPS的問題...你應該請嘗試使用this middleware作爲CORS部分，並在首先以原始HTTP訪問頁面時使其工作。據我所知，你必須爲use different ports HTTP和HTTPS。你也可能需要啓用CORS credentials。正如我所說的，我想你最好讓它在HTTP工作第一;）

然後，在分機一部分，已經在評論中提到，你應該禁用默認的頭文件（或你必須讓所有他們被你的服務器接受;見第一條評論this answer）。但是，你需要做的上的代理，因爲apparently it replaces the global setting在Ext.Ajax。

所以，這樣的事情：

Ext.create('Ext.data.Store', { 
    id   : 'countryStore', 
    model  : 'country', 
    autoLoad : true, 
    autoDestroy: true, 
    proxy: { 
     type: 'rest', 
     url : 'https://restcountries.eu/rest/v1/all', 
     useDefaultXhrHeader: false, // <= HERE 
     reader: { 
      type   : 'json', 
      headers: {'Accept': 'application/json'}, 
      totalProperty : 'total', 
      successProperty: 'success', 
      messageProperty: 'message' 
     } 
    } // <= and notice this change 
}); 

也許無關，但請注意，您的indendation是不正確的，並隱瞞了事實reader選項應用於商店本身，而不是代理（因此它被忽略）。