我正在尝试使用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.get() 和 jQuery.getJSON() ,它们都是 jQuery.ajax()的 简写方法。
CORS Anywhere是一个 node.js代理 ,它将CORS标头添加到代理请求中。要使用API,只需在URL前面加上API URL。(支持 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 获取数据 , 您可以使用以下代码段:
// 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是一个简单的 node.js代理,可为任何网站启用CORS请求。它允许您站点上的javascript代码访问其他域上的资源,这些资源通常由于同源策略而被阻止。
它是如何工作的?CORS Proxy利用了跨域资源共享功能,该功能是随HTML 5一起添加的。服务器可以指定它们希望浏览器允许其他网站请求其托管的资源。CORS代理只是一个HTTP代理,它在响应中添加标头,说“任何人都可以请求此请求”。
这是实现目标的另一种方法(请参阅www.corsproxy.com)。您所要做的就是删除 http:// 和 www。 从要代理的URL中添加,并在URL前面加上www.corsproxy.com/
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