Loading cross-domain endpoint with AJAX

Question

I m trying to load a cross-domain HTML page using AJAX but unless the dataType is  jsonp  I can t get a response  However using jsonp the browser is expecting a script mime type but is receiving  text html    My code for the request is     ajax       type   GET       url   http   saskatchewan univ-ubs fr 8080 SASStoredProcess do  username DARTIES3-2012 amp  password P ssw0rd amp  program  2FUtilisateurs 2FDARTIES3-2012 2FMon dossier 2Fanalyse dc amp annee 2012 amp ind V amp  action execute       dataType   jsonp      success  function  data             div ajax-field    html  data          Is there any way of avoiding using jsonp for the request  I ve already tried using the crossDomain parameter but it didn t work   If not is there any way of receiving the html content in jsonp  Currently the console is saying  unexpected  lt   in the jsonp reply

User · Answer

If the external site doesn t support JSONP or CORS  your only option is to use a proxy   Build a script on your server that requests that content  then use jQuery ajax to hit the script on your server

User · Answer

jQuery Ajax Notes   Due to browser security restrictions  most Ajax requests are subject to the same origin policy  the request can not successfully retrieve data from a different domain  subdomain  port  or protocol  Script and JSONP requests are not subject to the same origin policy restrictions    There are some ways to overcome the cross-domain barrier    CORS Proxy Alternatives Ways to circumvent the same-origin policy Breaking The Cross Domain Barrier   There are some plugins that help with cross-domain requests    Cross Domain AJAX Request with YQL and jQuery Cross-domain requests with jQuery ajax   Heads up   The best way to overcome this problem  is by creating your own proxy in the back-end  so that your proxy will point to the services in other domains  because in the back-end not exists the same origin policy restriction  But if you can t do that in back-end  then pay attention to the following tips    Warning   Using third-party proxies is not a secure practice  because they can keep track of your data  so it can be used with public information  but never with private data    The code examples shown below use jQuery get   and jQuery getJSON    both are shorthand methods of jQuery ajax      CORS Anywhere  CORS Anywhere is a node js proxy which adds CORS headers to the proxied request  To use the API  just prefix the URL with the API URL   Supports https  see github repository   If you want to automatically enable cross-domain requests when needed  use the following snippet     ajaxPrefilter  function  options      if  options crossDomain  amp  amp  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   gt     response               viewer   html response           Whatever Origin  Whatever Origin is a cross domain jsonp access  This is an open source alternative to anyorigin com   To fetch the data from google com  you can use this snippet      It is good specify the charset you expect     You can use the charset you want instead of utf-8     See details for scriptCharset and 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       amp callback         function  data            console log   gt     data              If the expected response is text plain             viewer   html data contents              If the expected response is JSON           var response     parseJSON data contents           CORS Proxy  CORS Proxy is a simple node js proxy to enable CORS request for any website  It allows javascript code on your site to access resources on other domains that would normally be blocked due to the same-origin policy    CORS-Proxy gr2m CORS-Proxy rmadhuram   How does it work  CORS Proxy takes advantage of Cross-Origin Resource Sharing  which is a feature that was added along with HTML 5  Servers can specify that they want browsers to allow other websites to request resources they host  CORS Proxy is simply an HTTP Proxy that adds a header to responses saying  anyone can request this    This is another way to achieve the goal  see www corsproxy com   All you have to do is strip http    and www  from the URL being proxied  and prepend the URL with www corsproxy com     get       http   www corsproxy com          en wikipedia org wiki Cross-origin resource sharing       function  response            console log   gt     response               viewer   html response           CORS proxy browser  Recently I found this one  it involves various security oriented Cross Origin Remote Sharing utilities  But it is a black-box with Flash as backend   You can see it in action here  CORS proxy browser Get the source code on GitHub  koto cors-proxy-browser

User · Answer

I m posting this in case someone faces the same problem I am facing right now  I ve got a Zebra thermal printer  equipped with the ZebraNet print server  which offers a HTML-based user interface for editing multiple settings  seeing the printer s current status  etc  I need to get the status of the printer  which is displayed in one of those html pages  offered by the ZebraNet server and  for example  alert   a message to the user in the browser  This means that I have to get that html page in Javascript first  Although the printer is within the LAN of the user s PC  that Same Origin Policy is still staying firmly in my way  I tried JSONP  but the server returns html and I haven t found a way to modify its functionality  if I could  I would have already set the magic header Access-control-allow-origin      So I decided to write a small console app in C   It has to be run as Admin to work properly  otherwise it trolls  D an exception  Here is some code      Create a listener          HttpListener listener   new HttpListener               Add the prefixes            foreach  string s in prefixes                            listener Prefixes Add s                       listener Prefixes Add  http     1234        accept connections from everywhere            because the printer is accessible only within the LAN  no portforwarding          listener Start            Console WriteLine  Listening                  Note  The GetContext method blocks while waiting for a request           HttpListenerContext context          string urlForRequest                HttpWebRequest requestForPage   null          HttpWebResponse responseForPage   null          string responseForPageAsString                while  true                        context   listener GetContext                HttpListenerRequest request   context Request              urlForRequest   request RawUrl Substring 1  request RawUrl Length - 1      remove the slash  which separates the portNumber from the arg sent             Console WriteLine urlForRequest                  Request for the html page              requestForPage    HttpWebRequest WebRequest Create urlForRequest               responseForPage    HttpWebResponse requestForPage GetResponse                responseForPageAsString   new StreamReader responseForPage GetResponseStream    ReadToEnd                    Obtain a response object              HttpListenerResponse response   context Response                 Send back the response              byte   buffer   System Text Encoding UTF8 GetBytes responseForPageAsString                  Get a response stream and write the response to it              response ContentLength64   buffer Length              response AddHeader  Access-Control-Allow-Origin            the magic header in action  -D             System IO Stream output   response OutputStream              output Write buffer  0  buffer Length                  You must close the output stream              output Close                  listener Stop      All the user needs to do is run that console app as Admin  I know it is way too     frustrating and complicated  but it is sort of a workaround to the Domain Policy problem in case you cannot modify the server in any way   edit  from js I make a simple ajax call     ajax                   type   POST                   url   http   LAN IP 1234 http   google com                   success  function  data                        console log  Success      data                                      error  function  e                        alert  Error      e                       console log  Error      e                                       The html of the requested page is returned and stored in the data variable

User · Answer

Your URL doesn t work these days  but your code can be updated with this working solution    x000D   x000D  var url    http   saskatchewan univ-ubs fr 8080 SASStoredProcess do  username DARTIES3-2012 amp  password P ssw0rd amp  program  2FUtilisateurs 2FDARTIES3-2012 2FMon dossier 2Fanalyse dc amp annee 2012 amp ind V amp  action execute   x000D   x000D  url    https   google com      TEST URL x000D   x000D    get  https   images     Math random   33   -focus-opensocial googleusercontent com gadgets proxy container none amp url     encodeURI url   function data    x000D         div ajax-field   html data   x000D      x000D   lt div class  ajax-field  gt  lt  div gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

You can use Ajax-cross-origin a jQuery plugin  With this plugin you use jQuery ajax   cross domain  It uses Google services to achieve this      The AJAX Cross Origin plugin use Google Apps Script as a proxy jSON   getter where jSONP is not implemented  When you set the crossOrigin   option to true  the plugin replace the original url with the Google   Apps Script address and send it as encoded url parameter  The Google   Apps Script use Google Servers resources to get the remote data  and   return it back to the client as JSONP    It is very simple to use         ajax           crossOrigin  true          url  url          success  function data                console log data                       You can read more here  http   www ajax-cross-origin com

User · Answer

Figured it out  Used this instead       div class   load  http   en wikipedia org wiki Cross-origin resource sharing  toctitle

User · Answer

Just put this in the header of your PHP Page and it ill work without API   header  Access-Control-Allow-Origin         allow everybody     or  header  Access-Control-Allow-Origin  http   codesheet org      allow just one domain    or    http origin     SERVER  HTTP ORIGIN       allow multiple domains   allowed domains   array     http   codesheet org      http   stackoverflow com      if  in array  http origin   allowed domains           header  Access-Control-Allow-Origin   http origin

User · Answer

To get the data form external site by passing using a local proxy as  suggested by jherax you can create a php page that fetches the content for you from respective external  url and than send a get request to that php page   var req   new XMLHttpRequest    req open  GET    http   localhost get url content php  false   if req status    200       alert req responseText       as a php proxy you can use https   github com cowboy php-simple-proxy

User · Answer

You need CORS proxy which proxies your request from your browser to requested service with appropriate CORS headers  List of such services are in code snippet below  You can also run provided code snippet to see ping to such services from your location    x000D   x000D     li   each function     x000D    var self   this  x000D    ping   this  text    then function delta    x000D      console log   self  text    delta    ms    x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdn rawgit com jdfreder pingjs c2190a3649759f2bd8569a72ae2b597b2546c871 ping js  gt  lt  script gt  x000D   lt ul gt  x000D     lt li gt https   crossorigin me  lt  li gt  x000D     lt li gt https   cors-anywhere herokuapp com  lt  li gt  x000D     lt li gt http   cors io  lt  li gt  x000D     lt li gt https   cors 5apps com  uri  lt  li gt  x000D     lt li gt http   whateverorigin org get url  lt  li gt  x000D     lt li gt https   anyorigin com get url  lt  li gt  x000D     lt li gt http   corsproxy nodester com  src  lt  li gt  x000D     lt li gt https   jsonp afeld me  url  lt  li gt  x000D     lt li gt http   benalman com code projects php-simple-proxy ba-simple-proxy php url  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

[javascript] Loading cross-domain endpoint with AJAX

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to cross-domain