使用jQuery AJAX加载跨域端点 [英] Loading cross-domain endpoint with jQuery AJAX
问题描述
我正在尝试使用AJAX加载跨域HTML页面，但除非dataType为jsonp，否则我无法获得响应。但是，使用jsonp，浏览器需要一个脚本mime类型，但是正在接收text / html。
I'm trying to load a cross-domain HTML page using AJAX but unless the dataType is "jsonp" I can't get a response. However using jsonp the browser is expecting a script mime type but is receiving "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参数，但它没有用。
Is there any way of avoiding using jsonp for the request? I've already tried using the crossDomain parameter but it didn't work.
如果没有，有没有办法在jsonp中接收html内容？目前控制台正在说意外<在jsonp的回复中。
If not is there any way of receiving the html content in jsonp? Currently the console is saying "unexpected <" in the jsonp reply.
推荐答案
jQuery Ajax Notes
- 由于浏览器安全限制，大多数 Ajax 请求受的约束。同源政策;请求无法成功从其他域，子域，端口或协议中检索数据。
- 脚本和JSONP请求不受相同的源策略限制。
- Due to browser security restrictions, most Ajax requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
- Script and JSONP requests are not subject to the same origin policy restrictions.
- CORS Proxy Alternatives
- Ways to circumvent the same-origin policy
- Breaking The Cross Domain Barrier
- Cross Domain AJAX Request with YQL and jQuery
- Cross-domain requests with jQuery.ajax
jQuery Ajax Notes
有一些方法可以克服跨域障碍：
There are some ways to overcome the cross-domain barrier:
有一些插件可以帮助解决跨域请求：
There are some plugins that help with cross-domain requests:
负责人up！
解决此问题的最佳方法是在后端创建自己的代理，以便代理服务器指向服务在其他域中，因为在后端不存在相同的原始策略限制。但如果你不能在后端做到这一点，那么请注意以下提示。
The best way to overcome this problem, is by creating your own proxy in the back-end, so that your proxy will point to the services in other domains, because in the back-end not exists the same origin policy restriction. But if you can't do that in back-end, then pay attention to the following tips.
警告！
使用第三方代理不是一种安全的做法，因为它们可以跟踪您的数据，因此可以与公共信息一起使用，但永远私人数据。
Using third-party proxies is not a secure practice, because they can keep track of your data, so it can be used with public information, but never with private data.
下面显示的代码示例使用 jQuery.get（） 和 jQuery.getJSON（） ，两者都是 jQuery.ajax（）
CORS Anywhere是 node.js代理，它将CORS标头添加到代理请求。
要使用API，只需在URL前加上API URL。 （支持 https ：请参阅 github存储库）
CORS Anywhere is a node.js proxy which adds CORS headers to the proxied request.
To use the API, just prefix the URL with the API URL. (Supports https: see github repository)
如果您想在需要时自动启用跨域请求，请使用以下代码段：
If you want to automatically enable cross-domain requests when needed, use the following snippet:
$.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 是跨域jsonp 访问。这是 anyorigin.com 的开源替代方案。
Whatever Origin is a cross domain jsonp access. This is an open source alternative to anyorigin.com.
要从 google.com 获取数据，您可以使用以下代码段：
To fetch the data from google.com, you can use this snippet:
// 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代理是一个简单的 node.js代理，可以为任何网站启用CORS请求。
它允许您网站上的javascript代码访问其他域名上的资源，这些资源通常会因同源策略而被阻止。
CORS Proxy is a simple node.js proxy to enable CORS request for any website. It allows javascript code on your site to access resources on other domains that would normally be blocked due to the same-origin policy.
- CORS-Proxy gr2m
- CORS-Proxy rmadhuram
它是如何工作的？
CORS代理利用了跨源资源共享，这是一项随HTML 5一起添加的功能。服务器可以指定他们希望浏览器允许其他网站请求他们托管的资源。 CORS代理只是一个HTTP代理，它为回复添加一个标题，说任何人都可以请求这个。
How does it work? CORS Proxy takes advantage of Cross-Origin Resource Sharing, which is a feature that was added along with HTML 5. Servers can specify that they want browsers to allow other websites to request resources they host. CORS Proxy is simply an HTTP Proxy that adds a header to responses saying "anyone can request this".
这是实现目标的另一种方式（参见 www.corsproxy.com ）。您所要做的就是从代理的网址中删除 http：// 和 www。，然后在 www.corsproxy.com前添加网址/
This is another way to achieve the goal (see www.corsproxy.com). All you have to do is strip http:// and www. from the URL being proxied, and prepend the URL with www.corsproxy.com/
$.get(
'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
最近我发现了这个，它涉及各种面向安全的Cross Origin Remote Sharing实用程序。但它是一个带有Flash作为后端的黑盒子。
Recently I found this one, it involves various security oriented Cross Origin Remote Sharing utilities. But it is a black-box with Flash as backend.
你可以在这里看到它： CORS代理浏览器
获取GitHub上的源代码： koto / cors-proxy-browser
You can see it in action here: CORS proxy browser
Get the source code on GitHub: koto/cors-proxy-browser
这篇关于使用jQuery AJAX加载跨域端点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
