javascript – 使用jQuery AJAX加载跨域端点

我正在尝试使用AJAX加载跨域HTML 页面,但除非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的回复中.

解决方法:

jQuery Ajax Notes

>由于浏览器安全限制,大多数Ajax请求都受same origin policy的约束;请求无法从其他域,子域,端口或协议成功检索数据.
>脚本和JSONP请求不受相同的原始策略限制.

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

> CORS Proxy Alternatives
> Ways to circumvent the same-origin policy
> Breaking The Cross Domain Barrier

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

> Cross Domain AJAX Request with YQL and jQuery
> Cross-domain requests with jQuery.ajax

当心！

解决此问题的最佳方法是在后端创建自己的代理,以便您的代理将指向其他域中的服务,因为在后端不存在相同的源策略限制.但是如果你不能在后端做到这一点,那么请注意以下提示.

警告！

使用第三方代理不是一种安全的做法,因为它们可以跟踪您的数据,因此可以与公共信息一起使用,但不能与私有数据一起使用.

下面显示的代码示例使用jQuery.get()和jQuery.getJSON(),两者都是jQuery.ajax()的简写方法

CORS Anywhere

CORS Anywhere是一个node.js代理,它将CORS头添加到代理请求中.
要使用API,只需在URL前加上API URL. (支持https：见github repository)

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

$.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是一个跨域jsonp访问.这是anyorigin.com的开源替代品.

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

// 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代理

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

> CORS-Proxy gr2m
> CORS-Proxy rmadhuram

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

这是实现目标的另一种方式(见www.corsproxy.com).你所要做的就是剥离http：//和www.来自被代理的URL,并在www.corsproxy.com/前面添加URL

$.get(
    'http://www.corsproxy.com/' +
    'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
    function (response) {
        console.log("> ", response);
        $("#viewer").html(response);
});

CORS代理浏览器

最近我发现了这个,它涉及各种面向安全的Cross Origin Remote Sharing实用程序.但它是一个黑盒子,后面有Flash作为后端.

你可以在这里看到它：CORS proxy browser
获取GitHub上的源代码：koto/cors-proxy-browser

javascript – 使用jQuery AJAX加载跨域端点

相关推荐