jQuery ajax 请求因为跨域而被阻止

Posted 2023-03-03

【中文标题】jQuery ajax 请求因为跨域而被阻止

【英文标题】：jQuery ajax request being block because Cross-Origin

【发布时间】：2015-10-09 09:30:03

【问题描述】：

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

控制台日志

跨域请求被阻止：同源策略不允许读取 http://www.dailymotion.com/embed/video/x28j5hv 的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

跨域请求被阻止：同源策略不允许读取 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;

【问题讨论】：

@D4V1D 抱歉，我忘记将其添加到我的问题中。如何通过 Ajax 从远程 url 获取内容？

设置crossDomain:true不设置跨域请求。该网站必须启用 CORS 才能使其正常工作。

@RoyiNamir 你能解释一下吗？我是 jquery 的新手。

【参考方案1】：

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

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

【讨论】：

对不起，但是是的，你可以做到！！！！尝试使用HttpClient，然后你可以得到一个字符串html。它对我有用。点击此链接确认***.com/questions/26597665/…

@Marinpietri HttpClient 在服务器上运行。我们在这里谈论客户端限制。 CORS 不是服务器到服务器通信中的问题。

好的！我只是想帮助他使用解决方法解决问题。谢谢！

【参考方案2】：

尝试在您的 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
    

);

【讨论】：

jsonp 确实有效，但响应数据显示错误。 SyntaxError: missing ; before statement "result":["id":1,"cat_name":"travel","imgpath":"http:\/adas\/asd"," 并指向“结果”后面的冒号，这是什么意思？

表示解析响应失败。当您使用 jsonp 时，响应应该类似于 CALLBACK(...JSON...)。您可以在 ajax 参数中定义 CALLBACK 指定“jsonpCallback”，否则它将随机生成并作为名为“callback”的字段发送到请求

与 Abilash 相同的错误。但是我的 API 不支持jsonp，我也不能添加或启用它。你怎么能用普通的json修复跨源？

@MrFaisal 您是否尝试过使用其他视频 ID？回答中提到的视频已被删除

从 jquery net::ERR_ABORTED 405 获取

【参考方案3】：

尝试跨域的 cURL 请求。

如果您通过第三方 API 工作或通过 CROSS-DOMAIN 获取数据，始终建议使用更安全的 cURL 脚本（服务器端）。

我总是喜欢 cURL 脚本。

【参考方案4】：

我通过更改浏览器中的文件路径解决了这个问题：

代替：c/XAMPP/htdocs/myfile.html 我写了：localhost/myfile.html

【参考方案5】：

$.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: *'); ?> */ 

【讨论】：

虽然这个代码块可能会回答这个问题，但最好能稍微解释一下为什么会这样。