使用AJAX加载跨域端点

Question

我正在尝试使用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回复中说“意外<”。

Answer 1

• 由于浏览器安全性的限制，大多数 Ajax 请求都遵循相同的原始策略；该请求无法从其他域，子域，端口或协议成功检索数据。
• 脚本和JSONP请求不受相同的原始策略限制。

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

• CORS代理替代
• 打破跨领域障碍

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

• 带有YQL和jQuery的跨域AJAX请求
• 使用jQuery.ajax的跨域请求

小心！

克服此问题的最佳方法是，在后端创建自己的代理，以便代理将指向其他域中的服务，因为在后端不存在 相同的原始策略
限制。但是，如果您不能在后端执行此操作，请注意以下提示。

警告！

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

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

任何地方的CORS

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

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

• CORS代理gr2m
• CORS代理rmadhuram

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

这是实现目标的另一种方法（请参阅www.corsproxy.com）。您所要做的就是删除
http：// 和 www。 从要代理的URL中添加，并在URL前面加上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代理浏览器

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

您可以在此处查看其运行情况：CORS代理浏览器
在GitHub上获取源代码：koto / cors-proxy-browser