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

问题描述

我试图加载用ajax跨域的HTML网页，但除非数据类型是JSONP我不能得到回应。 然而使用JSONP期待一个脚本MIME类型的浏览器，但recievingtext / html的。

我的code的要求是：

  $。阿贾克斯（{
    键入：GET，
    网址： "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",
    数据类型：JSONP
}），成功（功能（数据）{
    $（'div.ajax场'）的.html（数据）;
}）;
 

有没有办法避免使用JSONP的请求？我已经尝试过使用跨域参数，但没有奏效。

如果不是有没有办法receiveing​​在JSONP HTML内容？目前，控制台说：想不到＆LT;在JSONP回复。

在此先感谢

解决方案

的jQuery的Ajax笔记

• 由于浏览器的安全限制，大多数阿贾克斯要求需在同一产地政策;从不同的域，子域，端口或协议的请求不能成功地检索数据。
• 脚本和JSONP请求不受同源策略的限制。

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

• CORS代理替代
• 方式来规避同源政策
• 打破了跨域屏障

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

• <一个href="http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-cross-domain-ajax-request-with-yql-and-jquery/"相对=nofollow>跨域AJAX请求与YQL和jQuery
• 与jQuery.ajax跨域请求

注意！

要解决这个问题最好的办法，就是通过创建您自己的代理，在后端，让您的代理将指向服务的其他领域，因为在后端不存在的同根同源政策限制。但是，如果你不能这样做，在后端，然后要注意以下提示。

---

警告！

使用第三方代理不是一个安全的做法，因为他们可以跟踪你的数据，因此它可以用公共信息使用，但永远的私人数据。

---

如下使用的code例子 jQuery.get（） 和 jQuery.getJSON（） ，都是对 jQuery.ajax（） 的<速记方法/ P>

---

任何地方CORS

CORS Anywhere是一个 Node.js的代理这增加了CORS头到代理的请求。
要使用该API，只需preFIX与API URL网址。 （支持的 HTTPS ：请参见的GitHub库）

如果你想在需要时自动启用跨域请求，使用下面的代码片段：

  $。阿贾克斯prefilter（功能（选件）{
  如果（options.crossDomain＆安培;＆安培; jQuery.support.cors）{
    VAR HTTP =（window.location.protocol ===HTTP：HTTP：：将https：'？）;
    options.url = HTTP +'//cors-anywhere.herokuapp.com/'+ options.url;
    //options.url =htt​​p://cors.corsproxy.io/url=+ options.url;
  }
}）;

$获得（
    http://en.wikipedia.org/wiki/Cross-origin_resource_sharing，
    功能（响应）{
        的console.log（＆gt;中，响应）;
        $（＃观察者）的HTML（响应）;
}）;
 

---

无论产地

无论产地是一个跨域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：应用/ JSON的;字符集= UTF-8
}）;

$ .getJSON（'http://whateverorigin.org/get?url='+
    EN codeURIComponent（'http://google.com'）+'＆放大器;回调='，
    功能（数据）{
        的console.log（＆gt;中，数据）;

        //如果预期的响应是纯文本/
        $（＃查看器）HTML（data.contents）;

        //如果期望响应是JSON
        // VAR响应= $ .parseJSON（data.contents）;
}）;
 

---

CORS代理

CORS代理是一个简单的 Node.js的代理启用CORS请求任何网站。 它可以让你的网站访问通常会由于同源策略阻止其他域中的资源的JavaScript code。

• CORS-代理gr2m
• CORS-代理rmadhuram

它是如何工作的？ CORS代理利用跨域资源共享，这是一起被加入HTML 5的服务器可以指定希望浏览器允许其他网站要求的资源，他们主机功能。 CORS代理是一个简单的HTTP代理，增加了响应的头说：任何人都可以申请这个。

这是另一种方式来实现这一目标（见 www.corsproxy.com ）。所有你需要做的是带的http：// 和 WWW 从URL被代理，和prePEND与 WWW网址。 corsproxy.com /

  $。获得（
    http://www.corsproxy.com/'+
    en.wikipedia.org/wiki/Cross-origin_resource_sharing，
    功能（响应）{
        的console.log（＆gt;中，响应）;
        $（＃观察者）的HTML（响应）;
}）;
 

---

CORS代理浏览器

最近我发现了这一个，它涉及到各种安全导向的跨地远程共享工具。但它是一个黑盒子与Flash作为后端。

您可以看到在行动在这里： CORS代理的浏览器
获取在GitHub源$ C ​​$ C：江东/ CORS代理浏览器

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

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