使用AJAX加载跨域HTML页面 [英] Loading cross domain html page with AJAX

问题描述

我试图加载跨域html页面使用ajax，但除非dataType是jsonp我无法得到一个响应。
但是使用jsonp浏览器正在等待一个脚本mime类型，但收到text / html。

我的请求的代码是：

  $。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）; 
} ; 
  

有没有办法避免对请求使用jsonp？我已经尝试使用crossDomain参数，但它不工作。

如果没有在jsonp有任何方式接收html内容？目前控制台正在说意外<在jsonp回复中。

提前感谢

解决方案

• 由于浏览器安全性限制，大多数 Ajax 请求受同源起源政策;


• 脚本和JSONP请求不受同一来源策略的限制。

有一些方法可以克服跨域障碍：

• CORS Proxy Alternatives


• 规避同源政策的方法


• 打破跨域障碍

有一些插件可以帮助跨域请求：

• Cross使用YQL和jQuery的网域AJAX请求


• 跨网域请求与jQuery.ajax

抬头！

克服这个问题的最好方法是在后端创建自己的代理，这样您的代理将指向其他域中的服务，因为在后端不存在同源策略限制。

---

警告！

/ strong>

使用第三方代理不是一种安全的做法，因为它们可以跟踪您的数据，因此可以使用公开信息，但

---

下面显示的代码示例使用 jQuery.get（） 和 jQuery.getJSON（） ，都是 jQuery.ajax的简写方法（）

---

CORS Anywhere是一个 node.js代理，可将CORS标头添加到代理请求中。

使用API ，只需在网址前面添加API网址即可。 （支持 https ：请参阅 github存储库）

如果您希望在需要时自动启用跨域请求，请使用以下代码段：

  $ .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）; 
}）; 
  

---

无论原因是跨域jsonp 访问。这是 anyorigin.com 的开源替代品。

要从中获取数据 google.com ，您可以使用以下代码段：

  //很好指定字符集期望。 
 //你可以使用你想要的字符集，而不是utf-8。 
 //查看scriptCharset和contentType选项的详细信息：
 // http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings 
 $ .ajaxSetup（{
 scriptCharset：utf-8，//或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）; 
 
 //如果预期的响应是text / plain 
 $ （#viewer）。html（data.contents）; 
 
 //如果预期的响应是JSON 
 // var response = $ .parseJSON（data.contents）; 
}）; 
  

---

CORS Proxy是一个简单的 node.js代理，可为任何网站启用CORS请求。
它允许您的网站上的JavaScript代码访问其他域的资源，由于同源策略通常会被阻止。

• CORS-Proxy gr2m


• CORS-Proxy rmadhuram

它是如何工作的？
CORS Proxy利用跨源资源共享，这是与HTML 5一起添加的功能。服务器可以指定他们希望浏览器允许其他网站请求它们托管的资源。 CORS代理只是一个HTTP代理，它向响应中添加了一个标题，任何人都可以请求此响应。

这是另一种实现目标的方法（参见www.corsproxy.com ）。您只需要从要代理的网址中剥离 http：// 和 www。，然后在网址前加上 www.corsproxy.com /

  $。get（
'http://www.corsproxy.com /'+ 
'en.wikipedia.org/wiki/Cross-origin_resource_sharing'，
 function（response）{
 console.log（>，response）; 
 $（＃viewer）。html（response）; 
}）; 
  

---

浏览器

最近我发现了这个，它涉及到各种安全导向的跨源远程共享实用程序。但它是一个带有Flash作为后端的黑盒。

您可以在这里看到它的操作： CORS代理浏览器

获取GitHub上的源代码： koto / cors-proxy-browser

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 recieving "text/html".

My code for the 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 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 receiveing the html content in jsonp? Currently the console is saying "unexpected <" in the jsonp reply.

Thanks in advance

解决方案

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 && 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 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') + '&callback=?',
    function (data) {
        console.log("> ", 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("> ", 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

这篇关于使用AJAX加载跨域HTML页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！