jQuery Ajax Notes

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内容？目前控制台正在说“意外＆lt;”在jsonp回复中。

Answer 1

jQuery Ajax Notes

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

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

有一些插件可以帮助解决跨域请求：

抬起头来！

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

<小时/> 警告！

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

<小时/> 下面显示的代码示例使用 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

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代理是一个简单的 node.js代理，可以为任何网站启用CORS请求。它允许您网站上的JavaScript代码访问其他域上的资源，这些资源通常会因同源策略而被阻止。

CORS-Proxy gr2m

CORS-Proxy rmadhuram

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

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

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

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

Answer 2

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

AJAX Cross Origin插件使用Google Apps脚本作为代理jSON 没有实现jSONP的getter。设置crossOrigin时如果选项为true，则插件会将原始网址替换为Google 应用脚本地址并将其作为编码的url参数发送。谷歌 Apps脚本使用Google Servers资源来获取远程数据将其作为JSONP返回给客户端。

使用起来非常简单：

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

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

Answer 3

如果外部网站不支持JSONP或CORS，您唯一的选择是使用代理。

在服务器上构建一个请求该内容的脚本，然后使用jQuery ajax命中服务器上的脚本。

Answer 4

将它放在PHP页面的标题中，如果没有API，它就会生效：

header('Access-Control-Allow-Origin: *'); //allow everybody

或

header('Access-Control-Allow-Origin: http://codesheet.org'); //allow just one domain

或

$http_origin = $_SERVER['HTTP_ORIGIN'];  //allow multiple domains

$allowed_domains = array(
  'http://codesheet.org',
  'http://stackoverflow.com'
);

if (in_array($http_origin, $allowed_domains))
{  
    header("Access-Control-Allow-Origin: $http_origin");
}

Answer 5

我发布此信息，万一有人面临我现在面临的同样问题。我有一台Zebra热敏打印机，配备ZebraNet打印服务器，提供基于HTML的用户界面，用于编辑多个设置，查看打印机的当前状态等。我需要获取状态由ZebraNet服务器提供的打印机，显示在其中一个html页面中，例如，在浏览器中向用户发送alert（）消息。这意味着我必须首先在Javascript中获取该html页面。虽然打印机位于用户PC的局域网内，但Same Origin Policy仍然坚持我的方式。我尝试了JSONP，但服务器返回html，我还没有找到修改其功能的方法（如果可以的话，我已经设置了魔术头Access-control-allow-origin：*）。所以我决定在C＃中编写一个小型控制台应用程序。它必须作为管理员运行才能正常工作，否则它会眩晕：D例外。这是一些代码：

$.ajax({
                type: 'POST',
                url: 'http://LAN_IP:1234/http://google.com',
                success: function (data) {
                    console.log("Success: " + data);
                },
                error: function (e) {
                    alert("Error: " + e);
                    console.log("Error: " + e);
                }
            });

用户需要做的就是以管理员身份运行该控制台应用。我知道这也太令人沮丧和复杂，但如果您无法以任何方式修改服务器，它就是域策略问题的一种解决方法。

编辑：从js我做一个简单的ajax调用：

 RewriteRule (.*)/feyundco/ /$1?fq[ps_brand]=Fey+%26+Co. [P,L,R=301]

返回请求页面的html并存储在数据变量中。

Answer 6

要通过使用jherax建议的本地代理传递来获取外部站点的数据，您可以创建一个php页面，从相应的外部URL中为您提取内容，然后向该php页面发送获取请求。

var req = new XMLHttpRequest();
req.open('GET', 'http://localhost/get_url_content.php',false);
if(req.status == 200) {
   alert(req.responseText);
}

作为php代理，您可以使用https://github.com/cowboy/php-simple-proxy

Answer 7

您的URL目前无法正常工作，但是可以使用以下可行的解决方案来更新您的代码：

var 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";

url = 'https://google.com'; // TEST URL

$.get("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURI(url), function(data) {
    $('div.ajax-field').html(data);
});

<div class="ajax-field"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 8

您需要CORS代理，它会将您的请求从您的浏览器代理到具有相应CORS headers的请求服务。此类服务的列表位于下面的代码段中。您还可以运行提供的代码段，以查看您所在位置对此类服务的ping操作。

＆＃13;

$('li').each(function() {
  var self = this;
  ping($(this).text()).then(function(delta) {
    console.log($(self).text(), delta, ' ms');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jdfreder/pingjs/c2190a3649759f2bd8569a72ae2b597b2546c871/ping.js"></script>
<ul>
  <li>https://crossorigin.me/</li>
  <li>https://cors-anywhere.herokuapp.com/</li>
  <li>http://cors.io/</li>
  <li>https://cors.5apps.com/?uri=</li>
  <li>http://whateverorigin.org/get?url=</li>
  <li>https://anyorigin.com/get?url=</li>
  <li>http://corsproxy.nodester.com/?src=</li>
  <li>https://jsonp.afeld.me/?url=</li>
  <li>http://benalman.com/code/projects/php-simple-proxy/ba-simple-proxy.php?url=</li>
</ul>

＆＃13;

Answer 9

想出来。改为使用它。

$('.div_class').load('http://en.wikipedia.org/wiki/Cross-origin_resource_sharing #toctitle');

使用jQuery AJAX加载跨域端点

9 个答案:

jQuery Ajax Notes

CORS Anywhere

Whatever Origin

CORS代理

CORS代理浏览器