javascript - 使用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 回复中显示“unexpected <”。

Answer 1

jQuery Ajax 注释

• 由于浏览器安全限制，大多数 Ajax 请求均受 same origin policy 的约束。 ;该请求无法成功从不同的域、子域、端口或协议(protocol)检索数据。
• 脚本和 JSONP 请求不受同源策略限制。

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

• 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

注意!

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

<小时/>**警告!**

使用第三方代理并不是一种安全的做法，因为他们可以跟踪您的数据，因此可以将其用于公共(public)信息，但绝不用于私有(private)数据。

<小时/>

下面显示的代码示例使用 jQuery.get() 和 jQuery.getJSON() ，都是jQuery.ajax()的简写方法

<小时/>

CORS 无处不在

2021 年更新

Public demo server (cors-anywhere.herokuapp.com) will be very limited by January 2021, 31st

The demo server of CORS Anywhere (cors-anywhere.herokuapp.com) is meant to be a demo of this project. But abuse has become so common that the platform where the demo is hosted (Heroku) has asked me to shut down the server, despite efforts to counter the abuse. Downtime becomes increasingly frequent due to abuse and its popularity.

To counter this, I will make the following changes:

1. The rate limit will decrease from 200 per hour to 50 per hour.
2. By January 31st, 2021, cors-anywhere.herokuapp.com will stop serving as an open proxy.
3. From February 1st. 2021, cors-anywhere.herokuapp.com will only serve requests after the visitor has completed a challenge: The user (developer) must visit a page at cors-anywhere.herokuapp.com to temporarily unlock the demo for their browser. This allows developers to try out the functionality, to help with deciding on self-hosting or looking for alternatives.

<小时/>

CORS Anywhere 是一个 node.js 代理，它将 CORS header 添加到代理请求中。
要使用 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是跨域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 代理，它向响应添加一个 header ，表示“任何人都可以请求此请求”。

这是实现目标的另一种方式(参见 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);
});

http://www.corsproxy.com/ 域现在似乎是一个不安全/可疑的站点。不建议使用。

<小时/>

CORS代理浏览器

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

您可以在此处查看它的实际效果:CORS proxy browser
在 GitHub 上获取源代码:koto/cors-proxy-browser