Problema de CORS al solicitar de ExtJS a node.js. Solicitud o respuesta encabezado incorrecto?

Tengo problemas para realizar una solicitud ExtJS AJAX al servidor Nodejs entre dos dominios diferentes dentro de nuestra red y agradeceré cualquier ayuda. La respuesta falla cuando se intenta desde http y https desde el lado del cliente de ExtJS, pero un Curl desde mi local a través de http devuelve 200 OK con los datos adecuados. Estamos trabajando con la application/json tipo de contenido application/json .

La función ExtJS onReady ha habilitado CORS:

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

Una prueba de mi lado del cliente ExtJS en una URL de trabajo conocida que creará correctamente el almacén de datos ExtJS (trae 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' } }); 

Sin embargo, al intentar una solicitud a nuestro servidor Nodejs a través de

http :

 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' } }); 

Devuelve lo siguiente en la consola de 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.

Ahora, cuando se intenta sobre https :

Firefox muestra:

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.

y el encabezado de solicitud no muestra “application / json”, ¿es esto un problema ?:

 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 

Luego traté con Curl para ver cuáles eran las respuestas para ayudar a depurar

en http da una respuesta 200 OK, pero Access-Control-Allow-Origin no está definido incluso cuando lo estamos definiendo como "*" :

 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* } ] 

entonces cuando bash curl a través de 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 

Hemos habilitado CORS en nuestro servidor 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'); 

Intenté ser detallado en mi proceso de pensamiento y estoy dispuesto a probar nuevas formas de determinar cómo entender y resolver esto.

* SOLUCIÓN *

El problema es contenido mixto desde el navegador. Nuestra IU de cliente está en https (seguro) mientras que solicitábamos contenido http (no seguro) del servidor de nodejs. Necesitamos permitir que nuestro servidor nodejs se ejecute en https

Generamos certificaciones SSL y las implementamos en nuestro servidor nodejs.

Dentro del código de nodejs, habilitamos CORS con el módulo CORS y ejecutamos servidores http y 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); }); 

Parece que hay problemas con CORS y HTTPS en su servidor … Debe probar este middleware para la parte CORS y hacer que funcione cuando se accede a la página en HTTP sin procesar primero. Por lo que sé, tendrás que usar diferentes puertos para HTTP y HTTPS. Y probablemente también necesitará habilitar las credenciales de CORS . Como dije, creo que es mejor que primero hagas que funcione en HTTP;)

Luego, en la parte Ext, como ya se mencionó en los comentarios, probablemente debería desactivar los encabezados predeterminados (o tendrá que hacer que todos los acepte su servidor; consulte el primer comentario de esta respuesta ). Pero debe hacer eso en el proxy , porque aparentemente reemplaza la configuración global en Ext.Ajax .

Entonces, algo como esto:

 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 }); 

Probablemente no relacionado, pero tenga en cuenta que su indentación era incorrecta y ocultó el hecho de que la opción de reader se aplicó a la tienda en lugar del proxy (por lo que se ignoró).