Getting JSONP to work with Sesame & AngularJS

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Getting JSONP to work with Sesame & AngularJS

René Verheij
Hi guys,

I've read this discussion and seen the support issues about JSONP that are solved and closed, but I'm not getting it to work for me yet.

I'm building with AngularJS which provides a jsonp function.
I'm trying to query a sesame repository, but I'm getting a 404 status and data=undefined,
and just when the result comes in an error saying "Uncaught SyntaxError: Unexpected token ILLEGAL" (suggesting json/javascript was expected but not returned?)

However when copy the requested URL into the browser it does work, and the browser downloads a .srx file which contains the result in XML.

I've tested this with working repositories on both localhost and a remote server, but the error is the same.

My code is below.

My question is if this should indeed be possible, and if so, what could I be doing wrong?

I just found out that the headers of jsonp requests can't really be modified (cause you use the script tag and thus the browser decides the headers) so it can't be that.

Do I perhaps need to put something else in the URL? (like for youtube you need alt=json-in-script for it to work)

Cheers,
René



//this does work
//"callback=JSON_CALLBACK" is specificly required by angular for jsonp requests
system.http.jsonp(url).success(function(data) {
console.log('Success for youtube!');
});

//this doesn't (also not with a remote domain instead of localhost)
var q:string = encodeURIComponent('SELECT * WHERE {?s ?p ?o } LIMIT 10');
system.http.jsonp(url).success(function(data) {
console.log('Success for Sesame!');
}).error((data,status,headers,config) => {
//this logs: undefined - 404
console.log('error:' +data + ' - ' + status);
});

------------------------------------------------------------------------------

_______________________________________________
Sesame-general mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/sesame-general
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Getting JSONP to work with Sesame & AngularJS

Visser, Dale

René:

 

I am not familiar with AngularJS, but your code looks sensible enough. I would approach this situation by using a tool like Wireshark or tcpflow to capture the exchange and look for the differences in the requests that are getting sent. In fact, in Chrome or Firefox with Firebug, you can directly examine your requests in the built-in debugger.

 

Best regards,

Dale

 

From: René Verheij [mailto:[hidden email]]
Sent: Friday, April 04, 2014 5:38 PM
To: [hidden email]
Subject: [Sesame] Getting JSONP to work with Sesame & AngularJS
Importance: Low

 

Hi guys,

 

I've read this discussion and seen the support issues about JSONP that are solved and closed, but I'm not getting it to work for me yet.

 

I'm building with AngularJS which provides a jsonp function.

I'm trying to query a sesame repository, but I'm getting a 404 status and data=undefined,

and just when the result comes in an error saying "Uncaught SyntaxError: Unexpected token ILLEGAL" (suggesting json/javascript was expected but not returned?)

 

However when copy the requested URL into the browser it does work, and the browser downloads a .srx file which contains the result in XML.

I've tested this with working repositories on both localhost and a remote server, but the error is the same.

 

My code is below.

 

My question is if this should indeed be possible, and if so, what could I be doing wrong?

 

I just found out that the headers of jsonp requests can't really be modified (cause you use the script tag and thus the browser decides the headers) so it can't be that.

Do I perhaps need to put something else in the URL? (like for youtube you need alt=json-in-script for it to work)

 

Cheers,

René

 

 

//this does work

//"callback=JSON_CALLBACK" is specificly required by angular for jsonp requests

system.http.jsonp(url).success(function(data) {

     console.log('Success for youtube!');

});


//this doesn't (also not with a remote domain instead of localhost)

var q:string = encodeURIComponent('SELECT * WHERE {?s ?p ?o } LIMIT 10');

system.http.jsonp(url).success(function(data) {

     console.log('Success for Sesame!');

}).error((data,status,headers,config) => {

     //this logs: undefined - 404

     console.log('error:' +data + ' - ' + status);

});


------------------------------------------------------------------------------

_______________________________________________
Sesame-general mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/sesame-general
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Getting JSONP to work with Sesame & AngularJS

René Verheij
Ah yes ofcourse, tnx Dale, not sure why I didn't think of that yet.

So I just inspected the requests with google chrome developers toolbar and it seems in the request headers are the same ( Accept: */* )
but the response Headers are different:

the youtube JSONP request has Resonse Header: Content-Type: ext/javascript; charset=UTF-8
the sesame JSONP request has Response Header:
Content-Type:
application/x-binary-rdf-results-table;charset=ISO-8859-1

Sesame POST request from javascript? Also, in general, even if I would get this to work, I just figured out that using JSONP will at most allow me to do GET requests.
Though I'd really like to do POST requests too from the browser. 
But since CORS is not implemented yet into Sesame , is that even possible right now?
Or can I only get this to work by sending all my requests to a central server first who then delegates those requests to the different sesame stores (which would be slower ofcourse, but at least it would work for now)


Tnx!
René





2014-04-05 0:40 GMT+02:00 Visser, Dale <[hidden email]>:

René:

 

I am not familiar with AngularJS, but your code looks sensible enough. I would approach this situation by using a tool like Wireshark or tcpflow to capture the exchange and look for the differences in the requests that are getting sent. In fact, in Chrome or Firefox with Firebug, you can directly examine your requests in the built-in debugger.

 

Best regards,

Dale

 

From: René Verheij [mailto:[hidden email]]
Sent: Friday, April 04, 2014 5:38 PM
To: [hidden email]
Subject: [Sesame] Getting JSONP to work with Sesame & AngularJS
Importance: Low

 

Hi guys,

 

I've read this discussion and seen the support issues about JSONP that are solved and closed, but I'm not getting it to work for me yet.

 

I'm building with AngularJS which provides a jsonp function.

I'm trying to query a sesame repository, but I'm getting a 404 status and data=undefined,

and just when the result comes in an error saying "Uncaught SyntaxError: Unexpected token ILLEGAL" (suggesting json/javascript was expected but not returned?)

 

However when copy the requested URL into the browser it does work, and the browser downloads a .srx file which contains the result in XML.

I've tested this with working repositories on both localhost and a remote server, but the error is the same.

 

My code is below.

 

My question is if this should indeed be possible, and if so, what could I be doing wrong?

 

I just found out that the headers of jsonp requests can't really be modified (cause you use the script tag and thus the browser decides the headers) so it can't be that.

Do I perhaps need to put something else in the URL? (like for youtube you need alt=json-in-script for it to work)

 

Cheers,

René

 

 

//this does work

//"callback=JSON_CALLBACK" is specificly required by angular for jsonp requests

system.http.jsonp(url).success(function(data) {

     console.log('Success for youtube!');

});


//this doesn't (also not with a remote domain instead of localhost)

var q:string = encodeURIComponent('SELECT * WHERE {?s ?p ?o } LIMIT 10');

system.http.jsonp(url).success(function(data) {

     console.log('Success for Sesame!');

}).error((data,status,headers,config) => {

     //this logs: undefined - 404

     console.log('error:' +data + ' - ' + status);

});


------------------------------------------------------------------------------

_______________________________________________
Sesame-general mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/sesame-general



------------------------------------------------------------------------------

_______________________________________________
Sesame-general mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/sesame-general
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Getting JSONP to work with Sesame & AngularJS

René Verheij
ps: to clarify: with the jsonp request I'm not getting a 404 response anymore. Instead I'm getting a 200 status code, but the returned data is XML, not json/javascript. 


2014-04-05 11:05 GMT+02:00 René Verheij <[hidden email]>:
Ah yes ofcourse, tnx Dale, not sure why I didn't think of that yet.

So I just inspected the requests with google chrome developers toolbar and it seems in the request headers are the same ( Accept: */* )
but the response Headers are different:

the youtube JSONP request has Resonse Header: Content-Type: ext/javascript; charset=UTF-8
the sesame JSONP request has Response Header:
Content-Type:
application/x-binary-rdf-results-table;charset=ISO-8859-1

Sesame POST request from javascript? Also, in general, even if I would get this to work, I just figured out that using JSONP will at most allow me to do GET requests.
Though I'd really like to do POST requests too from the browser. 
But since CORS is not implemented yet into Sesame , is that even possible right now?
Or can I only get this to work by sending all my requests to a central server first who then delegates those requests to the different sesame stores (which would be slower ofcourse, but at least it would work for now)


Tnx!
René





2014-04-05 0:40 GMT+02:00 Visser, Dale <[hidden email]>:

René:

 

I am not familiar with AngularJS, but your code looks sensible enough. I would approach this situation by using a tool like Wireshark or tcpflow to capture the exchange and look for the differences in the requests that are getting sent. In fact, in Chrome or Firefox with Firebug, you can directly examine your requests in the built-in debugger.

 

Best regards,

Dale

 

From: René Verheij [mailto:[hidden email]]
Sent: Friday, April 04, 2014 5:38 PM
To: [hidden email]
Subject: [Sesame] Getting JSONP to work with Sesame & AngularJS
Importance: Low

 

Hi guys,

 

I've read this discussion and seen the support issues about JSONP that are solved and closed, but I'm not getting it to work for me yet.

 

I'm building with AngularJS which provides a jsonp function.

I'm trying to query a sesame repository, but I'm getting a 404 status and data=undefined,

and just when the result comes in an error saying "Uncaught SyntaxError: Unexpected token ILLEGAL" (suggesting json/javascript was expected but not returned?)

 

However when copy the requested URL into the browser it does work, and the browser downloads a .srx file which contains the result in XML.

I've tested this with working repositories on both localhost and a remote server, but the error is the same.

 

My code is below.

 

My question is if this should indeed be possible, and if so, what could I be doing wrong?

 

I just found out that the headers of jsonp requests can't really be modified (cause you use the script tag and thus the browser decides the headers) so it can't be that.

Do I perhaps need to put something else in the URL? (like for youtube you need alt=json-in-script for it to work)

 

Cheers,

René

 

 

//this does work

//"callback=JSON_CALLBACK" is specificly required by angular for jsonp requests

system.http.jsonp(url).success(function(data) {

     console.log('Success for youtube!');

});


//this doesn't (also not with a remote domain instead of localhost)

var q:string = encodeURIComponent('SELECT * WHERE {?s ?p ?o } LIMIT 10');

system.http.jsonp(url).success(function(data) {

     console.log('Success for Sesame!');

}).error((data,status,headers,config) => {

     //this logs: undefined - 404

     console.log('error:' +data + ' - ' + status);

});


------------------------------------------------------------------------------

_______________________________________________
Sesame-general mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/sesame-general




------------------------------------------------------------------------------

_______________________________________________
Sesame-general mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/sesame-general
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Getting JSONP to work with Sesame & AngularJS

Peter Ansell-2
In reply to this post by René Verheij
On 5 April 2014 20:05, René Verheij <[hidden email]> wrote:
> Ah yes ofcourse, tnx Dale, not sure why I didn't think of that yet.
>
> So I just inspected the requests with google chrome developers toolbar and
> it seems in the request headers are the same ( Accept: */* )

I have a feeling this is the issue. Browsers using Accept */* is the
hardest thing to support, but should definitely be possible in this
case based on detecting the JSONP callback. From memory the callback
parameter is not checked until after the format is decided, which
should be fine if the browser was smart and sent a useful accept
header but seems like Chrome is just not playing nice here, and
application/sparql-results+xml may be preferred to
application/sparql-results+json, etc.

> but the response Headers are different:
>
> the youtube JSONP request has Resonse Header: Content-Type: ext/javascript;
> charset=UTF-8
> the sesame JSONP request has Response Header:
> Content-Type:
> application/x-binary-rdf-results-table;charset=ISO-8859-1
>
> Sesame POST request from javascript? Also, in general, even if I would get
> this to work, I just figured out that using JSONP will at most allow me to
> do GET requests.
> Though I'd really like to do POST requests too from the browser.
> But since CORS is not implemented yet into Sesame , is that even possible
> right now?

My impression is that JSONP does not respect CORS headers, as JSONP is
a limited alternative to CORS that was developed before CORS was
designed.

> Or can I only get this to work by sending all my requests to a central
> server first who then delegates those requests to the different sesame
> stores (which would be slower ofcourse, but at least it would work for now)

That is the alternative to both JSONP and CORS, but isn't recommended of course.

Opened an issue on the tracker for this:

https://openrdf.atlassian.net/browse/SES-2043

Cheers,

Peter

------------------------------------------------------------------------------
Put Bad Developers to Shame
Dominate Development with Jenkins Continuous Integration
Continuously Automate Build, Test & Deployment
Start a new project now. Try Jenkins in the cloud.
http://p.sf.net/sfu/13600_Cloudbees
_______________________________________________
Sesame-general mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/sesame-general
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Getting JSONP to work with Sesame & AngularJS

Peter Ansell-2
On 8 April 2014 11:06, Peter Ansell <[hidden email]> wrote:

> On 5 April 2014 20:05, René Verheij <[hidden email]> wrote:
>> Ah yes ofcourse, tnx Dale, not sure why I didn't think of that yet.
>>
>> So I just inspected the requests with google chrome developers toolbar and
>> it seems in the request headers are the same ( Accept: */* )
>
> I have a feeling this is the issue. Browsers using Accept */* is the
> hardest thing to support, but should definitely be possible in this
> case based on detecting the JSONP callback. From memory the callback
> parameter is not checked until after the format is decided, which
> should be fine if the browser was smart and sent a useful accept
> header but seems like Chrome is just not playing nice here, and
> application/sparql-results+xml may be preferred to
> application/sparql-results+json, etc.
>
>> but the response Headers are different:
>>
>> the youtube JSONP request has Resonse Header: Content-Type: ext/javascript;
>> charset=UTF-8
>> the sesame JSONP request has Response Header:
>> Content-Type:
>> application/x-binary-rdf-results-table;charset=ISO-8859-1
>>
>> Sesame POST request from javascript? Also, in general, even if I would get
>> this to work, I just figured out that using JSONP will at most allow me to
>> do GET requests.
>> Though I'd really like to do POST requests too from the browser.
>> But since CORS is not implemented yet into Sesame , is that even possible
>> right now?
>
> My impression is that JSONP does not respect CORS headers, as JSONP is
> a limited alternative to CORS that was developed before CORS was
> designed.
>
>> Or can I only get this to work by sending all my requests to a central
>> server first who then delegates those requests to the different sesame
>> stores (which would be slower ofcourse, but at least it would work for now)
>
> That is the alternative to both JSONP and CORS, but isn't recommended of course.
>
> Opened an issue on the tracker for this:
>
> https://openrdf.atlassian.net/browse/SES-2043
>

There is a pull request open to move the JSONP check before the Accept
header check which should help with your issue. Really sucks when
browsers send Accept */* and didn't think Chrome was such a bad web
citizen to do that... Content negotiation seems to have gone out of
fashion in some circles.

The reason for getting SPARQL Results XML for Accept */* is that it is
the safest backup case, since it has been supported the longest by
different toolkits. That will still happen if you don't specify the
JSONP callback parameter.

https://bitbucket.org/openrdf/sesame/pull-request/269/ses-2043-check-for-jsonp-before-accept-to/diff

Cheers,

Peter

------------------------------------------------------------------------------
Put Bad Developers to Shame
Dominate Development with Jenkins Continuous Integration
Continuously Automate Build, Test & Deployment
Start a new project now. Try Jenkins in the cloud.
http://p.sf.net/sfu/13600_Cloudbees
_______________________________________________
Sesame-general mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/sesame-general
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Getting JSONP to work with Sesame & AngularJS

René Verheij
Yes, I think checking for the JSONP callback parameter before checking the Accept header is the right solution in this case.
That pull request should solve it, perfect!

Though for anyone who comes across this thread later: I also already got CORS to work by installing a CORS filter over Tomcat. 
That was relatively easy to setup, and this is probably the way to go for anyone who wants to do both GET and POST requests to the Sesame Server over HTTP.

Tnx for your help Peter!





2014-04-08 3:34 GMT+02:00 Peter Ansell <[hidden email]>:
On 8 April 2014 11:06, Peter Ansell <[hidden email]> wrote:
> On 5 April 2014 20:05, René Verheij <[hidden email]> wrote:
>> Ah yes ofcourse, tnx Dale, not sure why I didn't think of that yet.
>>
>> So I just inspected the requests with google chrome developers toolbar and
>> it seems in the request headers are the same ( Accept: */* )
>
> I have a feeling this is the issue. Browsers using Accept */* is the
> hardest thing to support, but should definitely be possible in this
> case based on detecting the JSONP callback. From memory the callback
> parameter is not checked until after the format is decided, which
> should be fine if the browser was smart and sent a useful accept
> header but seems like Chrome is just not playing nice here, and
> application/sparql-results+xml may be preferred to
> application/sparql-results+json, etc.
>
>> but the response Headers are different:
>>
>> the youtube JSONP request has Resonse Header: Content-Type: ext/javascript;
>> charset=UTF-8
>> the sesame JSONP request has Response Header:
>> Content-Type:
>> application/x-binary-rdf-results-table;charset=ISO-8859-1
>>
>> Sesame POST request from javascript? Also, in general, even if I would get
>> this to work, I just figured out that using JSONP will at most allow me to
>> do GET requests.
>> Though I'd really like to do POST requests too from the browser.
>> But since CORS is not implemented yet into Sesame , is that even possible
>> right now?
>
> My impression is that JSONP does not respect CORS headers, as JSONP is
> a limited alternative to CORS that was developed before CORS was
> designed.
>
>> Or can I only get this to work by sending all my requests to a central
>> server first who then delegates those requests to the different sesame
>> stores (which would be slower ofcourse, but at least it would work for now)
>
> That is the alternative to both JSONP and CORS, but isn't recommended of course.
>
> Opened an issue on the tracker for this:
>
> https://openrdf.atlassian.net/browse/SES-2043
>

There is a pull request open to move the JSONP check before the Accept
header check which should help with your issue. Really sucks when
browsers send Accept */* and didn't think Chrome was such a bad web
citizen to do that... Content negotiation seems to have gone out of
fashion in some circles.

The reason for getting SPARQL Results XML for Accept */* is that it is
the safest backup case, since it has been supported the longest by
different toolkits. That will still happen if you don't specify the
JSONP callback parameter.

https://bitbucket.org/openrdf/sesame/pull-request/269/ses-2043-check-for-jsonp-before-accept-to/diff

Cheers,

Peter

------------------------------------------------------------------------------
Put Bad Developers to Shame
Dominate Development with Jenkins Continuous Integration
Continuously Automate Build, Test & Deployment
Start a new project now. Try Jenkins in the cloud.
http://p.sf.net/sfu/13600_Cloudbees
_______________________________________________
Sesame-general mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/sesame-general


------------------------------------------------------------------------------
Put Bad Developers to Shame
Dominate Development with Jenkins Continuous Integration
Continuously Automate Build, Test & Deployment
Start a new project now. Try Jenkins in the cloud.
http://p.sf.net/sfu/13600_Cloudbees
_______________________________________________
Sesame-general mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/sesame-general
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Getting JSONP to work with Sesame & AngularJS

René Verheij
(cross domain requests that is)


2014-04-10 22:08 GMT+02:00 René Verheij <[hidden email]>:
Yes, I think checking for the JSONP callback parameter before checking the Accept header is the right solution in this case.
That pull request should solve it, perfect!

Though for anyone who comes across this thread later: I also already got CORS to work by installing a CORS filter over Tomcat. 
That was relatively easy to setup, and this is probably the way to go for anyone who wants to do both GET and POST requests to the Sesame Server over HTTP.

Tnx for your help Peter!





2014-04-08 3:34 GMT+02:00 Peter Ansell <[hidden email]>:

On 8 April 2014 11:06, Peter Ansell <[hidden email]> wrote:
> On 5 April 2014 20:05, René Verheij <[hidden email]> wrote:
>> Ah yes ofcourse, tnx Dale, not sure why I didn't think of that yet.
>>
>> So I just inspected the requests with google chrome developers toolbar and
>> it seems in the request headers are the same ( Accept: */* )
>
> I have a feeling this is the issue. Browsers using Accept */* is the
> hardest thing to support, but should definitely be possible in this
> case based on detecting the JSONP callback. From memory the callback
> parameter is not checked until after the format is decided, which
> should be fine if the browser was smart and sent a useful accept
> header but seems like Chrome is just not playing nice here, and
> application/sparql-results+xml may be preferred to
> application/sparql-results+json, etc.
>
>> but the response Headers are different:
>>
>> the youtube JSONP request has Resonse Header: Content-Type: ext/javascript;
>> charset=UTF-8
>> the sesame JSONP request has Response Header:
>> Content-Type:
>> application/x-binary-rdf-results-table;charset=ISO-8859-1
>>
>> Sesame POST request from javascript? Also, in general, even if I would get
>> this to work, I just figured out that using JSONP will at most allow me to
>> do GET requests.
>> Though I'd really like to do POST requests too from the browser.
>> But since CORS is not implemented yet into Sesame , is that even possible
>> right now?
>
> My impression is that JSONP does not respect CORS headers, as JSONP is
> a limited alternative to CORS that was developed before CORS was
> designed.
>
>> Or can I only get this to work by sending all my requests to a central
>> server first who then delegates those requests to the different sesame
>> stores (which would be slower ofcourse, but at least it would work for now)
>
> That is the alternative to both JSONP and CORS, but isn't recommended of course.
>
> Opened an issue on the tracker for this:
>
> https://openrdf.atlassian.net/browse/SES-2043
>

There is a pull request open to move the JSONP check before the Accept
header check which should help with your issue. Really sucks when
browsers send Accept */* and didn't think Chrome was such a bad web
citizen to do that... Content negotiation seems to have gone out of
fashion in some circles.

The reason for getting SPARQL Results XML for Accept */* is that it is
the safest backup case, since it has been supported the longest by
different toolkits. That will still happen if you don't specify the
JSONP callback parameter.

https://bitbucket.org/openrdf/sesame/pull-request/269/ses-2043-check-for-jsonp-before-accept-to/diff

Cheers,

Peter

------------------------------------------------------------------------------
Put Bad Developers to Shame
Dominate Development with Jenkins Continuous Integration
Continuously Automate Build, Test & Deployment
Start a new project now. Try Jenkins in the cloud.
http://p.sf.net/sfu/13600_Cloudbees
_______________________________________________
Sesame-general mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/sesame-general



------------------------------------------------------------------------------
Put Bad Developers to Shame
Dominate Development with Jenkins Continuous Integration
Continuously Automate Build, Test & Deployment
Start a new project now. Try Jenkins in the cloud.
http://p.sf.net/sfu/13600_Cloudbees
_______________________________________________
Sesame-general mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/sesame-general
Loading...