javascript - Loading cross-domain endpoint with jQuery AJAX -
i'm trying load cross-domain html page using ajax unless datatype "jsonp" can't response. using jsonp browser expecting script mime type receiving "text/html".
my code request is:
$.ajax({ type: "get", url: "http://saskatchewan.univ-ubs.fr:8080/sasstoredprocess/do?_username=darties3-2012&_password=p@ssw0rd&_program=%2futilisateurs%2fdarties3-2012%2fmon+dossier%2fanalyse_dc&annee=2012&ind=v&_action=execute", datatype: "jsonp", }).success( function( data ) { $( 'div.ajax-field' ).html( data ); }); is there way of avoiding using jsonp request? i've tried using crossdomain parameter didn't work.
if not there way of receiving html content in jsonp? console saying "unexpected <" in jsonp reply.
jquery ajax notes
- due browser security restrictions, ajax requests subject same origin policy; request can not retrieve data different domain, subdomain, port, or protocol.
- script , jsonp requests not subject same origin policy restrictions.
there ways overcome cross-domain barrier:
there plugins cross-domain requests:
heads up!
the best way overcome problem, creating own proxy in back-end, proxy point services in other domains, because in back-end not exists same origin policy restriction. if can't in back-end, pay attention following tips.
warning!
using third-party proxies not secure practice, because can keep track of data, can used public information, never private data.
the code examples shown below use jquery.get() , jquery.getjson(), both shorthand methods of jquery.ajax()
cors anywhere
cors anywhere node.js proxy adds cors headers proxied request.
use api, prefix url api url. (supports https: see github repository)
if want automatically enable cross-domain requests when needed, use following snippet:
$.ajaxprefilter( function (options) { if (options.crossdomain && jquery.support.cors) { var http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); options.url = http + '//cors-anywhere.herokuapp.com/' + options.url; //options.url = "http://cors.corsproxy.io/url=" + options.url; } }); $.get( 'http://en.wikipedia.org/wiki/cross-origin_resource_sharing', function (response) { console.log("> ", response); $("#viewer").html(response); }); whatever origin
whatever origin cross domain jsonp access. open source alternative anyorigin.com.
to fetch data google.com, can use snippet:
// specify charset expect. // can use charset want instead of utf-8. // see details scriptcharset , contenttype options: // http://api.jquery.com/jquery.ajax/#jquery-ajax-settings $.ajaxsetup({ scriptcharset: "utf-8", //or "iso-8859-1" contenttype: "application/json; charset=utf-8" }); $.getjson('http://whateverorigin.org/get?url=' + encodeuricomponent('http://google.com') + '&callback=?', function (data) { console.log("> ", data); //if expected response text/plain $("#viewer").html(data.contents); //if expected response json //var response = $.parsejson(data.contents); }); cors proxy
cors proxy simple node.js proxy enable cors request website. allows javascript code on site access resources on other domains blocked due same-origin policy.
how work? cors proxy takes advantage of cross-origin resource sharing, feature added along html 5. servers can specify want browsers allow other websites request resources host. cors proxy http proxy adds header responses saying "anyone can request this".
this way achieve goal (see www.corsproxy.com). have strip http:// , www. url being proxied, , prepend url www.corsproxy.com/
$.get( 'http://www.corsproxy.com/' + 'en.wikipedia.org/wiki/cross-origin_resource_sharing', function (response) { console.log("> ", response); $("#viewer").html(response); }); cors proxy browser
recently found one, involves various security oriented cross origin remote sharing utilities. black-box flash backend.
you can see in action here: cors proxy browser
source code on github: koto/cors-proxy-browser
wiki
Comments
Post a Comment