使用jQuery AJAX加载跨域端点
我试图加载使用AJAX的跨域HTML页面，但除非数据types是“jsonp”我无法得到响应。 然而，使用jsonp浏览器期待脚本MIMEtypes，但接收“文本/ 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回复中说“unexpected”。
jQuery的Ajax笔记
- 由于浏览器安全限制，大多数Ajax请求都受到相同的来源策略的约束。 该请求无法成功从不同的域，子域，端口或协议中检索数据。
- 脚本和JSONP请求不受相同的源策略限制。
有一些方法可以克服跨域障碍：
- CORS代理select
- 如何规避同源政策
- 打破跨域障碍
有一些插件可以帮助跨域请求：
- 使用YQL和jQuery跨域AJAX请求
- 使用jQuery.ajax跨域请求
小心！
解决这个问题的最好办法就是在后端创build自己的代理，这样你的代理就会指向其他域的服务，因为在后端不存在相同的来源策略限制。 但是，如果你不能在后端做到这一点，那么请注意以下提示。
警告！
使用第三方代理并不是一个安全的做法，因为他们可以跟踪您的数据，所以它可以用于公共信息，但从来没有私人数据。
下面显示的代码示例使用jQuery.get（）和jQuery.getJSON（） ，它们都是jQuery.ajax（）的简写方法。
CORS任何地方
CORS Anywhere是一个node.js代理 ，它将CORS头添加到代理请求中。
要使用API，只需在URL前加上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); });
不pipe起源
不pipeOrigin是一个跨域的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代理rmadhuram
它是如何工作的？ CORS代理利用跨源资源共享，这是与HTML 5一起添加的function。服务器可以指定他们希望浏览器允许其他网站请求其托pipe的资源。 CORS Proxy仅仅是一个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远程共享工具。 但是这是一个以Flash作为后端的黑盒子。
你可以在这里看到它： CORS代理浏览器
获取GitHub上的源代码： koto / cors-proxy-browser
你可以使用Ajax-cross-origin一个jQuery插件。 有了这个插件，你使用jQuery.ajax()跨域。 它使用Google服务来实现这一点：
AJAX Cross Origin插件使用Google Apps脚本作为jSON getter的代理，其中未实现jSONP。 当您将crossOrigin选项设置为true时，插件会将原始urlreplace为Google Apps脚本地址，并将其作为编码url参数发送。 Google Apps脚本使用Google服务器资源获取远程数据，并以JSONP的forms将其返回给客户端。
使用非常简单：
$.ajax({ crossOrigin: true, url: url, success: function(data) { console.log(data); } });
你可以在这里阅读更多： http : //www.ajax-cross-origin.com/
如果外部站点不支持JSONP或CORS，则唯一的select是使用代理。
在请求内容的服务器上构build一个脚本，然后使用jQuery ajax命中服务器上的脚本。
如果有人面临我现在面临的同样的问题，我正在发布这个消息。 我有一台配有ZebraNet打印服务器的Zebra热敏打印机，它提供了一个基于HTML的用户界面，用于编辑多个设置，查看打印机的当前状态等。我需要获取打印机的状态在ZebraNet服务器提供的那些html页面之一中，例如，在浏览器中向用户发送alert（）消息。 这意味着我必须首先在Javascript中获取该HTML页面。 尽pipe打印机位于用户PC的局域网内，但同源策略仍然坚守在我的路上。 我试过JSONP，但服务器返回的HTML，我还没有find一种方法来修改其function（如果我可以，我已经设置了魔术头访问控制允许来源：*）。 所以我决定用C＃编写一个小的控制台应用程序。 它必须以pipe理员身份运行才能正常工作，否则它将钓鱼：D是一个例外。 这里是一些代码：
// Create a listener. HttpListener listener = new HttpListener(); // Add the prefixes. //foreach (string s in prefixes) //{ // listener.Prefixes.Add(s); //} listener.Prefixes.Add("http://*:1234/"); // accept connections from everywhere, //because the printer is accessible only within the LAN (no portforwarding) listener.Start(); Console.WriteLine("Listening..."); // Note: The GetContext method blocks while waiting for a request. HttpListenerContext context; string urlForRequest = ""; HttpWebRequest requestForPage = null; HttpWebResponse responseForPage = null; string responseForPageAsString = ""; while (true) { context = listener.GetContext(); HttpListenerRequest request = context.Request; urlForRequest = request.RawUrl.Substring(1, request.RawUrl.Length - 1); // remove the slash, which separates the portNumber from the arg sent Console.WriteLine(urlForRequest); //Request for the html page: requestForPage = (HttpWebRequest)WebRequest.Create(urlForRequest); responseForPage = (HttpWebResponse)requestForPage.GetResponse(); responseForPageAsString = new StreamReader(responseForPage.GetResponseStream()).ReadToEnd(); // Obtain a response object. HttpListenerResponse response = context.Response; // Send back the response. byte[] buffer = System.Text.Encoding.UTF8.GetBytes(responseForPageAsString); // Get a response stream and write the response to it. response.ContentLength64 = buffer.Length; response.AddHeader("Access-Control-Allow-Origin", "*"); // the magic header in action ;-D System.IO.Stream output = response.OutputStream; output.Write(buffer, 0, buffer.Length); // You must close the output stream. output.Close(); //listener.Stop();
所有用户需要做的就是以pipe理员身份运行该控制台应用程序。 我知道这也太…令人沮丧和复杂，但它是一种解决scheme，以防万一您不能以任何方式修改服务器的域策略问题。
编辑：从js我做一个简单的ajax调用：
$.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); } });
请求的页面的html被返回并存储在数据variables中。
通过使用jheraxbuild议的本地代理来获取外部网站的数据表单，您可以创build一个php页面，从相应的外部url为您提取内容，然后向该页面发送获取请求。
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
只要把它放在你的PHP页面的头部就可以了。
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"); }
运行代码片段，查看您所在位置的ping。
$('li').each(function() { var self = this; ping($(this).text()).then(function(delta) { console.log($(self).text(), delta, ' ms'); }); });
<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>
弄清楚了。 用这个来代替。
$('.div_class').load('http://en.wikipedia.org/wiki/Cross-origin_resource_sharing #toctitle');
