使用 AJAX 加载跨域终结点jQuery Ajax NotesCORS Anywhere无论什么来源CORS ProxyCORS 代理浏览器

javascript jquery ajax cross-domain

2022-08-30 04:21:25

我正在尝试使用AJAX加载跨域HTML页面，但除非dataType是“jsonp”，否则我无法获得响应。但是，使用jsonp，浏览器需要脚本哑剧类型，但收到“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？我已经尝试过使用跨域参数，但它不起作用。

如果没有，有没有办法在jsonp中接收html内容？目前，控制台在jsonp回复中说“意外<”。

答案 1

jQuery Ajax Notes

由于浏览器安全限制，大多数Ajax请求都受同源策略的约束;请求无法从其他域、子域、端口或协议中成功检索数据。
脚本和 JSONP 请求不受相同源策略限制的约束。

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

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

小心！

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

**警告！

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

下面显示的代码示例使用jQuery.get（）和jQuery.getJSON（），两者都是jQuery.ajax（）的速记方法。

CORS Anywhere

2021年更新

公共演示服务器（cors-anywhere.herokuapp.com）将在2021年1月31日之前受到非常限制

CORS Anywhere（cors-anywhere.herokuapp.com）的演示服务器旨在作为此项目的演示。但是滥用已经变得如此普遍，以至于托管演示的平台（Heroku）要求我关闭服务器，尽管努力对抗滥用。由于滥用及其受欢迎程度，停机时间变得越来越频繁。

为了解决这个问题，我将进行以下更改：

速率限制将从每小时 200 个减少到每小时 50 个。

到 2021 年 1 月 31 日，cors-anywhere.herokuapp.com 将停止充当开放代理。

从 2021 年 2 月 1 日起，cors-anywhere.herokuapp.com 将仅在访问者完成挑战后为请求提供服务：用户（开发者）必须访问 cors-anywhere.herokuapp.com 的页面才能暂时解锁其浏览器的演示。这允许开发人员试用该功能，以帮助决定自托管或寻找替代方案。

CORS Anywhere 是一个节点.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);
});

无论什么来源

无论来源是什么，都是跨域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

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

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

这是实现目标的另一种方法（见 www.corsproxy.com）。您所要做的就是从代理的URL中去除 http:// 和www.，并在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

答案 2

您可以使用Ajax-cross-origin一个jQuery插件。使用此插件，您可以使用跨域。它使用Google服务来实现以下目标：jQuery.ajax()

AJAX Cross Origin插件使用Google Apps Script作为代理jSON getter，其中jSONP未实现。当您将 crossOrigin 选项设置为 true 时，插件会将原始网址替换为 Google Apps 脚本地址，并将其作为编码网址参数发送。Google Apps 脚本使用 Google 服务器资源来获取远程数据，并将其作为 JSONP 返回到客户端。

它使用起来非常简单：

    $.ajax({
        crossOrigin: true,
        url: url,
        success: function(data) {
            console.log(data);
        }
    });

您可以在此处阅读更多内容：http://www.ajax-cross-origin.com/