jQuery ajax请求被阻塞，因为跨域

Question

如何通过ajax从远程url获取内容?

jQuery ajax请求被阻塞，因为跨源

控制台日志

Cross-Origin Request Blocked:同源策略禁止读取远端资源为http://www.dailymotion.com/embed/video/x28j5hv。(原因:CORS头'Access-Control-Allow-Origin'丢失).

Cross-Origin Request Blocked:同源策略禁止读取远端资源为http://www.dailymotion.com/embed/video/x28j5hv。(原因:CORS请求失败).

$.ajax({
url: "http://www.dailymotion.com/embed/video/x28j5hv",
type:'GET',
contentType: "html",
crossDomain:true,
success: function(data){
   //$('#content').html($(data).html());
   var src = $(data).html();
    alert(src);
    return false;
}

Answer 1

尝试在Ajax调用中使用JSONP。它将绕过同源策略。

http://learn.jquery.com/ajax/working-with-jsonp/

试例

$.ajax({
    url: "https://api.dailymotion.com/video/x28j5hv?fields=title",
    dataType: "jsonp",
    success: function( response ) {
        console.log( response ); // server response
    }
});

Answer 2

您在您的端(客户端)无能为力。你不能自己启用跨域调用，源(dailymotion.com)需要启用CORS才能工作。

你唯一能做的就是创建一个服务器端代理脚本来为你做这些。您是否在项目中使用任何服务器端脚本?PHP, Python, ASP。净等等?如果是这样，您可以创建一个服务器端"代理"。该脚本对dailymotion进行HTTP调用并返回响应。然后从Javascript代码调用该脚本，因为该服务器端脚本与脚本代码位于同一域，所以CORS不会成为问题。

Answer 3

尝试使用cURL请求跨域。

如果您使用第三方api或通过CROSS-DOMAIN获取数据，则始终建议使用cURL脚本(服务器端)，这更安全。

我更喜欢cURL脚本

Answer 4

我通过改变浏览器中的文件路径来解决这个问题:

• 代替:c/XAMPP/htdocs/myfile.html
• 我写:localhost/myfile.html

Answer 5

如果源是您可以访问的服务器，那么您可以使用位于适当文件夹中的.htaccess文件打开特定文件夹(及其子文件夹)的跨域访问:

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>

Answer 6

$.ajax({
            url: "https://api.dailymotion.com/video/x28j5hv?fields=title",
            type: "POST",
            dataType: "json",
            crossDomain: true,
            format: "json",
            success:function(json){
                console.log('message: ' + "success"+ JSON.stringify(json));                     
            },
            error:function(error){
                console.log('message Error' + JSON.stringify(error));
            }  
        });    
/* <?php header('Access-Control-Allow-Origin: *'); ?> */