【问题标题】:jQuery ajax request being block because Cross-OriginjQuery ajax 请求因为跨域而被阻止
【发布时间】:2015-10-09 09:30:03
【问题描述】:

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

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

控制台日志

跨域请求被阻止:同源策略不允许读取 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 的新手。

标签: jquery ajax cross-domain


【解决方案1】:

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

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

【讨论】:

  • 对不起,但是是的,你可以做到!!!!尝试使用HttpClient,然后你可以得到一个字符串html。它对我有用。点击此链接确认stackoverflow.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: *'); ?> */ 

      【讨论】:

      • 虽然这个代码块可能会回答这个问题,但最好能稍微解释一下为什么会这样。
      猜你喜欢
      • 2019-11-04
      • 2019-04-17
      • 2015-06-08
      • 2015-05-05
      • 2021-06-26
      • 2014-10-13
      • 2017-02-06
      相关资源
      最近更新 更多