Same Origin issue with web service call

Question

My web server runs at http://mypc.com:80 `

Given the following snip:

$(window).load(function () {
    var myURL = "http://mypc.com:8000/PSOCharts/service/HighChart_ColumnChart/i";


    $.getJSON(myURL)
        .done(function(data) {alert(data);});

    });

I am running to this error:

XMLHttpRequest cannot load http://mypc.com:8000/PSOCharts/service/HighChart_ColumnChart/i. Origin http://mypc.com is not allowed by Access-Control-Allow-Origin.

I understand why (I think) b/c my webservice runs at port 8000 which is different from what IIS is running on (port 80).

I thought I could get around by using jsonp (according to the jQuery documentation here

So I copied the example of making a call to the flickr api, but it isnt working. Any thoughts/sugggestions?

UPDATE

Ok so my request is being made now:

var myURL = "http://192.168.1.104:8000/PSOCharts/service/HighChart_ColumnChart/i?jsoncallback=?";

    $.ajax({
        url :myURL,
        dataType: "jsonp",
        success: function(data) {a(data)} ,
        error: function(){alert("err");},
        });

But I am continually hitting the error function, here is what's being returned:

[1.4,54.43,49.39,93.23]

Now I'm assuming this is b/c the response text doesnt contain any type of callback

here is the part of the interface I'm calling:

 [WebInvoke(Method = "GET",
        RequestFormat = WebMessageFormat.Json,
        ResponseFormat = WebMessageFormat.Json,
        UriTemplate = "HighChart_ColumnChart/{id}?callback={cb}")]
    List<double> HighChart_ColumnChart(string id,string cb);

Here is the actual function being called:

  public List<double> HighChart_ColumnChart(string id,string cb)
    {
        var z = new List<double>();
        z.Add(1.4);
        z.Add(54.43);
        z.Add(49.39);
        z.Add(93.23);
        return z;
    }

when I debug, the CB param is something like : "jQuery19108121746340766549_1372630643878". How do I modify the code to wrap it correctly? Thanks for the help thus far!

From your link: "If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details." Maybe you need to add this? — Daniel Gimenez, Jun 30 '13 at 21:18
The first answer from this will help too: http://stackoverflow.com/questions/2681466/jsonp-with-jquery — Daniel Gimenez, Jun 30 '13 at 21:19

score 0 · Accepted Answer · edited May 23 '17 at 12:28

If you're using jsonp you must modify the response from the server to wrap your json data in a method as specified by the callback query string parameter.

So if your server was returning something like:

["test1", test2]

it would become:

callback(["test1", "test2"]);

Where "callback" is specified by jquery in the query string to your "webservice"

EDIT: Given your sample code, I think you will need to serialize and wrap your response manually. MVC has a Jsonp helper method, and I see reports that in .NET4 WCF will do it for you based on a callback parameter being present, but if that's not working then add something like the following to end of your method.

JavaScriptSerializer s = new JavaScriptSerializer();
    string jsonString = s.Serialize(z);

    return WebOperationContext.Current.CreateTextResponse(string.Format("{0}({1});", cb, jsonString), "application/json; charset=utf-8", Encoding.UTF8);

(modified from here: Wiring up JSONP using JQuery and WCF)

I think you are on the right track now - but I'm unsure how to wrap it in the the correct 'callback' My code has been added. — Wjdavis5, Jun 30 '13 at 22:09

score 0 · Answer 2 · answered Jun 30 '13 at 21:21

0

If you're trying to use jsonp, make sure one of the following is the case:

If you're using $.get and set dataType to jsonp.
If you're using $.getJSON and included callback=? in the URL.

answered Jun 30 '13 at 21:21

Siva Charan

17,940
9
60
95

Same Origin issue with web service call

2 Answers2