从 ExtJS 请求到 node.js 时出现 CORS 问题。请求或响应标头不正确?

2024-03-16

我在网络内两个不同域之间向 Nodejs 服务器发出 ExtJS AJAX 请求时遇到问题,非常感谢任何帮助。当尝试从 ExtJS 客户端的 http 和 https 时,响应失败,但我本地的 Curl 通过 http 返回 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'
        }
});

然而,当尝试通过以下方式向我们的 Nodejs 服务器发出请求时

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

在 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.

并且请求标头不显示“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

然后我尝试使用 Curl 看看响应是什么来帮助调试

on http给出 200 OK 响应,但 Access-Control-Allow-Origin 未定义,即使我们将其定义为"*":

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

然后当我尝试通过 Curl 时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

我们已经在 Nodejs 服务器上启用了 CORS:

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

我试图详细说明我的思考过程,并且我愿意尝试新的方法来确定如何理解和解决这个问题。

* 解决方案 *

问题是来自浏览器的混合内容。我们的客户端 UI 使用 https(安全),而我们从 Nodejs 服务器请求 http(不安全)内容。我们需要允许我们的 Nodejs 服务器在 https 上运行

We 生成的 SSL 证书 http://www.hacksparrow.com/node-js-https-ssl-certificate.html并将它们实现到我们的 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);
});

您的服务器中的 CORS 和 HTTPS 似乎都存在问题...您应该尝试这个中间件 https://github.com/troygoode/node-cors对于 CORS 部分,并使其在首先访问原始 HTTP 页面时起作用。据我所知,你必须使用不同的端口 https://stackoverflow.com/a/11745114/1387519对于 HTTP 和 HTTPS。您可能还需要启用CORS 凭证 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Credentials。正如我所说,我认为你最好先让它在 HTTP 中工作;)

然后,在 Ext 部分,正如评论中已经提到的,您可能应该禁用默认标头(或者您必须使服务器接受所有标头;请参阅第一个评论这个答案 https://stackoverflow.com/a/13147554/1387519)。但你需要这样做在代理上, 因为显然它取代了全局设置 http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.data.proxy.Ajax-cfg-useDefaultXhrHeader in 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
});

可能不相关,但请注意,您的缩进不正确,并且隐藏了以下事实:reader选项应用于商店本身而不是代理(因此它被忽略)。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 ExtJS 请求到 node.js 时出现 CORS 问题。请求或响应标头不正确? 的相关文章

随机推荐