0

I was using jQuery's getJSON method and a method in Extjs to get some json data from server.

The Javascript code is put on apache2 on server A and the web service is put on tomcat7 on server A. But when I use host B to visit the javascript, and the a method in javascript code calls the web service. the request is made from host B to server A, right?

But I get an error:

XMLHttpRequest cannot load http://192.168.5.107:8080/restful/product/all/?callback=?&_dc=1384439969320&page=1&start=0&limit=25. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.5.107' is therefore not allowed access.

And I have to add the

?callback=?

to my url.

But I get another error called "Uncaught SyntaxError: Unexpected token : " with my jQuery code. I googled this and most of the persons' suggestion is to remove the callback. But I have to use it, or I cannot get the JSON data.

Here's my code using jQuery:

$.getJSON('http://192.168.5.115:8080/restful/standard/id/' + id, function(data) {
        console.log('old data:\n');
        console.log(data); // use data as a generic object
        oldObj = data;
        var newObj = Object.keys(oldObj).map(function(k) {
            return { key: k, value: oldObj[k] };
        });

        console.log('new data:\n');
        console.log(newObj); // use data as a generic object
    });

And even I add the callback parameter. The code in Extjs still get the first error.

Here's my Extjs code:

// create the data store
    var store = Ext.create('Ext.data.Store', {
        model: 'Product',
        proxy: {
            type: 'ajax',
            url : 'http://192.168.5.115:8080/restful/product/all/?callback',
            reader: {
                type: 'json'
            }
        }
    });

I have tried to fix his for three days and got nothing. I really wish someone can help me solve it.

Jane
  • 687
  • 3
  • 10
  • 20
  • 2
    Without answering your actual question, you may like to read over http://en.wikipedia.org/wiki/Same-origin_policy, http://en.wikipedia.org/wiki/Cross-origin_resource_sharing, and http://en.wikipedia.org/wiki/JSONP for some comprehensive general background. – apsillers Nov 14 '13 at 14:52
  • 2
    You did not make it clear that your REST service is returning JSONP data. If not you'd better try enabling CORS instead of trying jsonp http://stackoverflow.com/a/5753269/1236044 – jbl Nov 14 '13 at 15:09
  • @jbl You are right. But I have tried multiple way to add the "Access-Control-Allow-Origin" header on the server's response. like add a filter in /etc/tomcat7/web.xml. add the header in the return statement in java. But still cannot work – Jane Nov 14 '13 at 15:19
  • @apsillers I have read these. I think I have added all the support for CORS, but I still get the error. And now I want to try to add the callback. But get new error – Jane Nov 14 '13 at 15:21
  • Ext call seems different on this page http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.data.proxy.JsonP.html with a jsonp type instead of ajax, and special properties for callback handling – jbl Nov 14 '13 at 15:49

1 Answers1

1

If you want to "try the callback", you must use a proxy of type 'jsonp', not 'ajax'.

The callback param will be added automatically by the proxy, however your server will have to process it, that is use the actual callback name demanded by the client.

This other question will give you a complete example both for client, and for server (in the answer).

Community
  • 1
  • 1
rixo
  • 23,815
  • 4
  • 63
  • 68