来自Node.JS（使用express）服务器的跨域jQuery.getJSON在Internet Explorer中不起作用 [英] Cross-domain jQuery.getJSON from a Node.JS (using express) server does not work in Internet Explorer

问题描述

这是一个恼人的问题，我不认为它只有IE有这个问题。基本上我有一个Node.js服务器，我从中进行跨域调用以获取一些JSON数据来显示。

这需要一个JSONP调用，在URL中给出回调。

因此，网站（domainA.com）有一个HTML页面，带有这样的JS脚本（所有工作都很好Firefox 3）：

 < script type =text / javascript 
 var jsonName ='ABC'
 var url ='http://domainB.com:8080/stream/aires/'//获取的JSON数据
 jQuery.getJSON（url + jsonName，function（json）{
 //解析JSON数据
 var data = []，header，comment = / ^＃/，x; 
 jQuery.each（json.RESULT。 ROWS，function（i，tweet）{...} 
} 
 ...... 
< / script> 
  
 
 
现在我的Node.js服务器很简单了（我使用express）：
  var app = require（'express'）。createServer（）; 
 var express = require（'express'）; 
 app.listen（3000）; 
 
 app.get（'/ stream / aires /：id'，function（req，res）{
 request（'http：//'+options.host+'：'+ options.port + options.path，function（error，response，body）{
 if（！error&& response.statusCode == 200）{
 console.log（body）; //打印google网页
 res.writeHead（200，{
'Content-Type'：'application / json'，
'Cache-Control'：'no-cache'，
 'Connection'：'keep-alive'，
'Access-Control-Allow-Origin'：'*'，
'Access-Control-Allow-Credentials'：'true'
} ）; 
 
 res.end（JSON.stringify（JSON.parse（body）））; 
} 
}）
}）; 
  
如何更改这两个，这样他们将在IE中使用跨域GET？我一直在搜索互联网，似乎有一些不同的东西，例如 jQuery.support.cors = true; 这不工作。似乎还有很多冗长的解决方法。 
 
 
 
没有真正的理想设计模式，我已经能够找到这种类型的事情。 
 
 
 
看到我可以控制网页和跨域Web服务我发送到什么是最好的改变，以确保兼容性所有IE版本以及FireFox，Opera和Chrome等？
 
 
 
干杯！
解决方案
说我们有两个服务器，myServer.com和crossDomainServer.com，我们都控制它们。 
 
 
 
假设我们希望myServer.com的客户端从crossDomainServer.com中提取一些数据，那么首先客户端需要发送一个JSONP请求来交叉DomainServer.com：
  //来自myServer.com的客户端JS 
 //脚本标记绕过跨域安全问题
 var script = document.createElement（'script'）; 
 script.src ='http://crossDomainServer.com/getJSONPResponse'; 
 document.body.appendChild（script）; //触发GET请求
  
在跨域服务器上，我们需要处理这个GET请求： / p> 
 
 
  //在crossDomainServer.com的express应用程序中
 app.get（'/ getJSONPResponse'，function（req， res）{
 res.writeHead（200，{'Content-Type'：'application / javascript'}）; 
 res.end（__ parseJSONPResponse（+ JSON.stringify（'some data'） +）;）; 
}）;然后在我们的客户端JS中，我们需要一个全局函数来解析JSONP响应：
 
  //当跨域服务器响应
时调用function __parseJSONPResponse（data）{
 //现在你有访问您的数据
} 
  
适用于各种浏览器，包括IE 6 。
 
This is an annoying problem, and I don't suppose that it's only IE that has this problem. Basically I have a Node.js server, from which I am making cross-domain calls to get some JSON data for display.

This needs to be a JSONP call and I give a callback in the URL. What I am not sure is, how to do this?

So the website (domainA.com) has an HTML page with a JS script like this (all works fine in Firefox 3):
<script type="text/javascript">
    var jsonName = 'ABC'
    var url = 'http://domainB.com:8080/stream/aires/' //The JSON data to get
    jQuery.getJSON(url+jsonName, function(json){                
       // parse the JSON data
       var data = [], header, comment = /^#/, x;                    
       jQuery.each(json.RESULT.ROWS,function(i,tweet){ ..... }
    }
    ......
</script>
Now my Node.js server is very simple (I'm using express):
var app = require('express').createServer();
var express = require('express');
app.listen(3000);

app.get('/stream/aires/:id', function(req, res){
  request('http://'+options.host+':'+options.port+options.path, function (error, response, body) {
      if (!error && response.statusCode == 200) {
          console.log(body); // Print the google web page.
        res.writeHead(200, {
             'Content-Type': 'application/json',
               'Cache-Control': 'no-cache',
             'Connection': 'keep-alive',
               'Access-Control-Allow-Origin': '*',
             'Access-Control-Allow-Credentials': 'true'
      });

            res.end(JSON.stringify(JSON.parse(body)));
         }
       })
    });
How can I change these two so they will work with cross-domain GET in IE? I have been searching the internet and there seem to be a few different things like jQuery.support.cors = true; which does not work. There also seem to be a lot of lengthy workarounds. 

There is no real 'ideal' design pattern which I have been able to find for this type of thing. 

Seeing as I have control over both the web page and the cross domain web service I'm sending to what is the best change to make to ensure compatability across all IE versions along with FireFox, Opera, Chrome etc?

Cheers!
解决方案
Say we have two servers, myServer.com and crossDomainServer.com, both of which we control. 

Assuming we want a client of myServer.com to pull some data from crossDomainServer.com, first that client needs to make a JSONP request to crossDomainServer.com:
// client-side JS from myServer.com
// script tag gets around cross-domain security issues
var script = document.createElement('script');
script.src = 'http://crossDomainServer.com/getJSONPResponse';  
document.body.appendChild(script); // triggers a GET request        
On the cross-domain server we need to handle this GET request:
// in the express app for crossDomainServer.com
app.get('/getJSONPResponse', function(req, res) {
  res.writeHead(200, {'Content-Type': 'application/javascript'});
  res.end("__parseJSONPResponse(" + JSON.stringify('some data') + ");");  
});    
Then in our client-side JS we need a global function to parse the JSONP response:
// gets called when cross-domain server responds
function __parseJSONPResponse(data) {
  // now you have access to your data 
}
Works well across a wide variety of browsers, IE 6 included.

                        
这篇关于来自Node.JS（使用express）服务器的跨域jQuery.getJSON在Internet Explorer中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！