javascript - 使用 AJAX 加载跨域端点

标签 javascript jquery ajax cross-domain

我正在尝试使用 AJAX 加载跨域 HTML 页面,但除非数据类型为“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 <”。

最佳答案

jQuery Ajax 注释

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

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

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

注意!

克服这个问题的最好方法是在后端创建自己的代理,这样你的代理就会指向其他域中的服务,因为在后端不存在同源政策限制。但是如果你不能在后端做到这一点,那么请注意以下提示。


**警告!**

使用第三方代理并不安全,因为它们可以跟踪您的数据,因此可以将其用于公共(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 代理利用跨源资源共享,这是随 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);
});

CORS代理浏览器

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

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

关于javascript - 使用 AJAX 加载跨域端点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15005500/

相关文章:

javascript - Node.js server.address().address 返回::

javascript - Ajax/jQuery Django 刷新元素类

php - ajax 成功函数未触发

WebKit 浏览器中的 AJAX 问题

javascript - Firefox Web 控制台中的默认范围 - 发生了什么?

javascript - Google 相关栏 - 如何避免出现在我的网站上

jquery - 获取动态添加按钮的值

jquery - 在 jQuery 中获取最高后代后代

javascript - 当 jQuery Ajax 调用完成时控制请求

javascript - XMLHttpRequest 无法加载 URL。请求的资源上不存在 'Access-Control-Allow-Origin' header