使用jQuery AJAX加载跨域端点

xon*_*ous 127 javascript ajax jquery cross-domain cors

我正在尝试使用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 );
});
Run Code Online (Sandbox Code Playgroud)

有没有办法避免使用jsonp进行请求?我已经尝试过使用crossDomain参数,但它没有用.

如果没有,是否有任何方式在jsonp中接收html内容?目前,控制台在jsonp回复中说"意外<".

jhe*_*rax 225

jQuery Ajax Notes

  • 由于浏览器安全限制,大多数Ajax请求都遵循相同的原始策略 ; 请求无法从其他域,子域,端口或协议成功检索数据.
  • 脚本和JSONP请求不受相同的源策略限制.

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

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

当心!

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


警告!

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


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


CORS Anywhere

CORS Anywhere是一个node.js代理,它将CORS头添加到代理请求中.
要使用API​​,只需在URL前加上API 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);
});
Run Code Online (Sandbox Code Playgroud)


无论什么起源

无论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);
});
Run Code Online (Sandbox Code Playgroud)


CORS代理

CORS Proxy是一个简单的node.js代理,用于为任何网站启用CORS请求.它允许您站点上的JavaScript代码访问其他域上的资源,这些域通常会因同源策略而被阻止.

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

这是实现目标的另一种方式(参见www.corsproxy.com).你所要做的就是剥离http://www.来自被代理的URL,并在其前面添加URLwww.corsproxy.com/

$.get(
    'http://www.corsproxy.com/' +
    'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
    function (response) {
        console.log("> ", response);
        $("#viewer").html(response);
});
Run Code Online (Sandbox Code Playgroud)


CORS代理浏览器

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

您可以在这里的行动看出来:CORS代理浏览器
获取GitHub上的源代码:筝/ CORS代理浏览器

  • 您也可以从这里部署自己的WhateverOrigin.org版本(或将代码移植到您自己的端口):https://github.com/ripper234/Whatever-Origin/ (4认同)

小智 23

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

AJAX Cross Origin插件使用Google Apps Script作为代理jSON getter,其中未实现jSONP.当您将crossOrigin选项设置为true时,插件会将原始网址替换为Google Apps脚本地址,并将其作为编码的url参数发送.Google Apps脚本使用Google Servers资源获取远程数据,并将其作为JSONP返回给客户端.

它使用起来非常简单:

    $.ajax({
        crossOrigin: true,
        url: url,
        success: function(data) {
            console.log(data);
        }
    });
Run Code Online (Sandbox Code Playgroud)

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

  • 就我而言,这个插件从未起作用.它在Chrome上没有任何作用. (19认同)

use*_*654 13

如果外部站点不支持JSONP或CORS,则唯一的选择是使用代理.

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


小智 7

只要把它放在你的 PHP 页面的标题中,它就不会在没有 API 的情况下工作:

header('Access-Control-Allow-Origin: *'); //allow everybody  
Run Code Online (Sandbox Code Playgroud)

或者

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

或者

$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");
}
Run Code Online (Sandbox Code Playgroud)