javascript - Cross-domain jQuery.getJSON from a Node.JS (using express) server does not work in Internet Explorer - Stack Overfl

admin管理员组

文章数量:1352795

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) 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 = ':8080/stream/aires/' //The JSON data to get
    jQuery.getJSON(url+jsonName, function(json){                
       // parse the JSON data
       var data = [], header, ment = /^#/, 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 patability across all IE versions along with FireFox, Opera, Chrome etc?

Cheers!

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.) 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.:8080/stream/aires/' //The JSON data to get
    jQuery.getJSON(url+jsonName, function(json){                
       // parse the JSON data
       var data = [], header, ment = /^#/, 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 patability across all IE versions along with FireFox, Opera, Chrome etc?

Cheers!

• javascript
• jquery
• internet-explorer
• node.js
• cross-domain

Share Improve this question Follow edited Nov 16, 2012 at 7:52 dda 6,21322 gold badges2727 silver badges3535 bronze badges asked Sep 29, 2011 at 11:49 NightWolfNightWolf 7,7941111 gold badges7575 silver badges122122 bronze badges 3

• stackoverflow./questions/3362474/… – Paul Grime Commented Sep 29, 2011 at 14:24
• Thanks, already know this, hence my question how to use JSONP? In that question JSONP was not used... – NightWolf Commented Sep 29, 2011 at 15:07
• Sorry, missed that bit. How about this giantflyingsaucer./blog/?p=2682. Use the jsonp and jsonpCallback properties. Your server side code needs to read these parameters and wrap a function call around your data. – Paul Grime Commented Sep 29, 2011 at 16:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Say we have two servers, myServer. and crossDomainServer., both of which we control.

Assuming we want a client of myServer. to pull some data from crossDomainServer., first that client needs to make a JSONP request to crossDomainServer.:

// client-side JS from myServer.
// script tag gets around cross-domain security issues
var script = document.createElement('script');
script.src = 'http://crossDomainServer./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.
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.

The following code shows how to handle the GET request (using express) and how to wrap the JSON response using the callback given:

app.get('/foo', function(req, res){ 
  res.header('Content-Type', 'application/json');
  res.header('Charset', 'utf-8') 
  res.send(req.query.callback + '({"something": "rather", "more": "pork", "tua": "tara"});'); 
});

本文标签：