ASP.NET

Cross domain JsonP RSS

25 replies

Last post Apr 02, 2012 05:16 PM by oleronne

‹ Previous Thread|Next Thread ›

- Reply
oleronne

Member

6 Points

5 Posts
Re: Cross domain JsonP

Mar 30, 2012 10:03 AM|LINK
Hi,

SiggiGG

If you are hitting the same origin policy then your script is not issuing JSONP requests. Can you post your JS code?

I am using the jsonp formatter descibed earlier in the tread

here is my js code:
```
$.ajax({
                url: 'http://myhost.com/api/TrendsgetIDP/GettblPunchSystemBySearch',
                type: 'GET',
                dataType: 'jsonp',

            data:
                {
                    term: request.term
                },
                success: function(data) {

                    response($.map(data,function(item)
                    {
                    return{
                         label: item.label,
                         value: item.value,
                         id: item.id
                        }
                    }));
                }
             });
                
            }
```
this is what is send/returned when running the html and the web api from the same origin/host seen in ie developer tools

URL :‎‎ /api/TrendsgetIDP/GettblPunchSystemBySearch?callback=jQuery16405371125295753421_1333098256847&term=cab&_=1333099875643

Method : GET

Result: 200

Type: text/javascript

Inintiator JS Library XMLHttpRequest

Here is the response body

jQuery16407070443479675472_1333027926134([{

"id":"1","label":"Relocation of Site Road N and E of Casthouse incl. HV Cables to SS #57, #61 & #71","value":"Relocation of Site Road N and E of Casthouse incl. HV Cables to SS #57, #61 & #71"},{"id":"4","label":"MV Feeders & Fiber Optic Cables to SS #158 & SS #58 from Main SS","value":"MV Feeders & Fiber Optic Cables to SS #158 & SS #58 from Main SS"}])

so this looks fine I believe.

How ever when not running in same origin policy

the developer tools show the following,

URL Method Result Type Received Taken Initiator Wait‎‎ Start‎‎ Request‎‎ Response‎‎ Cache read‎‎ Gap‎‎ http://myhost.com/api/TrendsgetIDP/GettblPunchSystemBySearch?callback=jQuery16403147274156726918_1333098484163&term=cab&_=1333098502481

Method: GET

Result: 200

Type: application/json

initiator <script>

Here the type and initiator are different and then the jQuery function part is missing from the response body(just getting plain json).

Looks to me that something in IIS 7.5 is stopping the cross domain script. or am I missing something ?.

hmmm...

look at the request headers I noticed a difference.

Here is the one with different origin

GET /api/TrendsgetIDP/GettblPunchSystemBySearch?callback=jQuery16406378011673223227_1333105907099&term=cab&_=1333105930988 HTTP/1.1

Host: myhost.com

Connection: keep-alive User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1081.0 Safari/536.5

Accept: */*

Referer: http://localhost:20248/

Accept-Encoding: gzip,deflate,sdch

Accept-Language: en-US,en;q=0.8

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

where as the one with the same header looks like this

GET /api/TrendsgetIDP/GettblPunchSystemBySearch?callback=jQuery164047053241613321006_1333111448809&term=cab&_=1333111481380 HTTP/1.1

Host: myhost.com

Connection: keep-alive

X-Requested-With: XMLHttpRequest

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1081.0 Safari/536.5 Accept: text/javascript, application/javascript, application/ecmascript, application/x-ecmascript, */*; q=0.01

Referer: http://myhost.com/

Accept-Encoding: gzip,deflate,sdch

Accept-Language: en-US,en;q=0.8

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

here we have a X-Requested-With: XMLHttpRequest , the Accept is changed.

not sure why this has changed ?
- Edited by oleronne on Mar 30, 2012 10:03 AM
- Edited by oleronne on Mar 30, 2012 12:52 PM
- Edited by oleronne on Mar 30, 2012 12:52 PM
- Edited by oleronne on Mar 30, 2012 12:54 PM
- Edited by oleronne on Mar 30, 2012 12:54 PM
- Reply
mudassarkhan

All-Star

78956 Points

13402 Posts

MVP

Re: Cross domain JsonP

Mar 30, 2012 10:11 AM|LINK

Here's a simple example of JSONP that gets data from facebook

http://jqueryfaqs.com/Questions/Facebook-Graph-API-Get-User-profile-using-JSON-and-jQuery.aspx

MAK [MVP ASP.Net] ASP.Net Freelancer

Contact me
- Reply
ThatsIT

Participant

1026 Points

389 Posts

Re: Cross domain JsonP

Mar 30, 2012 10:49 AM|LINK

did you register the formater in global.asax

config.Formatters.Insert(0,

New Thats.Formatters.JsonpMediaTypeFormatter)
- Reply
oleronne

Member

6 Points

5 Posts

Re: Cross domain JsonP

Apr 02, 2012 09:35 AM|LINK

Hi,

Yes it is in there, in the application_start.
- Edited by oleronne on Apr 02, 2012 09:35 AM
- Reply
skumar2003

Member

90 Points

51 Posts

Re: Cross domain JsonP

Apr 02, 2012 12:41 PM|LINK

Oleronne,

You may want to check out this post on my blog.

Cross Domain RESTful CRUD Operations using jQuery

It covers everything you need to do on the client side (jQuery) as well as everything you need to do on the server side (in a Web API project) and it has been tested on all major browsers (they each need some specific things in place).

Further, the solution provided in the post support not just GET methods from cross-domain but also PUT and DELETE, so complete CRUD operation are supported.

I haven't looked at the code of the jsonp formatter you're using but I have a blog post on that as well, so you may want to check it out.

JsonpMediaTypeFormatter–Web API JSONP

I hope this helps.

Matlus - The Internet Technology Blog
- Edited by skumar2003 on Apr 02, 2012 12:41 PM
- Reply
oleronne

Member

6 Points

5 Posts
Re: Cross domain JsonP

Apr 02, 2012 05:16 PM|LINK
Hi

First I would like to thank everyone for giving me tips and hints..,

I have know figured out what is going wrong, it is the http headers that are different , for instance in ie application/javascript is returned and not text/javascript so adding
```
SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/javascript"));
```
in the jsonpmediaformatter solved the problem in IE. Since firefox and crome only send */* in the request header, I will have to do some more work

here is a simular case reported http://bugs.jquery.com/ticket/7694.
- Edited by oleronne on Apr 02, 2012 05:16 PM