如何解决此问题:跨域读取阻塞 (CORB) 阻止了跨域响应

     2023-02-19     95

关键词:

【中文标题】如何解决此问题:跨域读取阻塞 (CORB) 阻止了跨域响应【英文标题】:How To Solve This Problem : Cross-Origin Read Blocking (CORB) blocked cross-origin response 【发布时间】:2019-08-05 04:44:30 【问题描述】:

警告是:

jquery-1.9.1.js:8526 跨域读取阻塞 (CORB) 阻止了 MIME 类型 application/json 的跨域响应 https://www.metaweather.com/api/location/search/?query=lo。有关详细信息,请参阅https://www.chromestatus.com/feature/5629709824032768。

我的代码是:

<!DOCTYPE html>
<html>
<head>
  <title> Search API </title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> 
  </script> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
   <div class="container">
     <h2>API Search Whether</h2>    
     <div class="row">
        <div class="col-md-6">
            <input type="text" name="name" id="name" class="form-control">
        </div>
        <div class="col-md-2">              
            <button type="button" id="search" class="btn btn-primary btn-lg">Search</button>
        </div>
    </div>
    <br><br><br><br>
    <div class="row">
        <table class="table" border="2px">
            <thead>
                <tr style="color:blue; font-weight:bold;">
                    <td >Domain</td>
                    <td>Suffix</td>
                    <td>Expiry Date</td>
                    <td>Created At</td>
                    <td>Country</td>
                </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
    </div>
</div>  
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"> 
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<script type="text/javascript">
    $("#search").click(function () 
    
        $("#tbody").html("");           
        var $this = $(this);
        var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i>Loading...';
        $("#search").attr("disabled", true);
        if ($(this).html() !== loadingText) 
            $this.data('original-text', $(this).html());
            $this.html(loadingText);
           
        var name = $('#name').val();        
        var i;
        $.ajax(
            url: "https://www.metaweather.com/api/location/search/?query="+name,
            dataType:'json',
            headers: function(xhr)
                xhr.setRequestHeader('x-xss-protection' ,'1; mode=block');
                xhr.setRequestHeader('Content-Language' ,'en');
                xhr.setRequestHeader('x-content-type-options', 'nosniff');
                xhr.setRequestHeader('strict-transport- security' , 'max-age=2592000; includeSubDomains');
                xhr.setRequestHeader('Vary' , 'Accept-Language, Cookie');
                xhr.setRequestHeader('Allow' , 'GET, HEAD,OPTIONS');
                xhr.setRequestHeader('x-frame-options' ,'DENY');
                xhr.setRequestHeader('Content-Type' , 'application/json');
                xhr.setRequestHeader('X-Cloud-Trace-Context' , 'f2dd29a5a475c5489584b993c3ce670d');
                xhr.setRequestHeader('Date' , 'Thu, 14 Mar 2019 09:43:04 GMT');
                xhr.setRequestHeader('Server' , 'Google Frontend');
                xhr.setRequestHeader('Content-Length' , '100');
            ,
            success: function (result) 
                var f = result;
                var content = '';
                var i;
                for (i = 0; i <= f[i] ; i++) 
                    content += "<tr>";
                    content = content+"<td>"+f[i].title+"</td>";
                    content = content + "</tr>";
                
                $("#tbody").append(content);
                $this.html($this.data('original-text'));
                $("#search").attr("disabled", false);
            );      
      );
   </script>
</body>

我尝试了最后 4 小时但没有解决方案... 提前谢谢您的帮助...

【问题讨论】:

jquery-1.9.1.js危险 jQuery 1.x 和 2.x 已经结束生命周期,并且没有收到安全修复。升级到受支持的 jQuery 版本。 我使用了 jquery-3.3.1.js 但错误@Quentin 先处理first错误信息。在您引用的错误消息之前,它说Access to XMLHttpRequest at 'https://www.metaweather.com/api/location/search/?query=fdf' from origin 'http://localhost:7007' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 这是我要解决的问题。没有其他错误...@Quentin 我测试的时候有 【参考方案1】:

我的 Chrome 扩展程序最近也遇到了这个问题,并按照 Chrome 团队3. Limit Cross-Origin Requests in Background Pages 的建议将所有 HTTP 请求移到后台页面来关闭它

如果扩展程序的后台页面只是简单地获取和中继内容脚本选择的任何 URL(有效地充当开放代理),则会出现类似的安全问题。也就是说,受感染的渲染器进程可以劫持内容脚本并要求后台页面获取和中继攻击者选择的敏感 URL。相反,后台页面应该只从扩展作者想要的 URL 中获取数据,理想情况下是一小部分 URL,不会将用户的敏感数据置于危险之中。

【讨论】:

【参考方案2】:

我不认为这是一个绝对的答案,因为我在我构建的 chrome 扩展上也遇到了同样的错误。现在,根据 CORB (Cross Origin Read Blocking) 的建议,Chrome 团队在 73+ 版本中更新了浏览器的安全性,以防范幽灵和崩溃漏洞。

在此链接上,他们提供了开发人员应如何修复此更新中的错误的方法:https://www.chromium.org/Home/chromium-security/corb-for-developers

这个的父资源是:https://www.chromestatus.com/feature/5629709824032768 当我找到我的修复时,我会用它更新这篇文章。

【讨论】:

你找到解决办法了吗? 链接“chromium.org/Home/chromium-security/…”为我们提供了前进的思路。可能是对内容脚本的 ajax 调用是问题所在? 是的,上面的想法确实奏效了。只是将我的 ajax 调用从内容脚本移动到后台 js 文件并通过 postMessage 触发该函数,它按预期工作

如何修复“跨域读取阻塞 (CORB) 阻止了 MIME 类型应用程序/json 的跨域响应”。问题?

】如何修复“跨域读取阻塞(CORB)阻止了MIME类型应用程序/json的跨域响应”。问题?【英文标题】:Howtofix"Cross-OriginReadBlocking(CORB)blockedcross-originresponsewithMIMEtypeapplication/json."issue?【发布时间】:2019-07-0903:05:43【问题描述】... 查看详情

跨域读取阻止 (CORB) API-调用 Chrome 扩展

...ing(CORB)API-CallChrome-extension【发布时间】:2019-10-2201:54:52【问题描述】:我想通过我的chrome-extension的post调用一个api,问题是没有得到响应数据。我刚刚在控制台中获得了跨域读取阻塞(CORB),响应为空。跨域读取阻塞(CORB)阻止了MIME... 查看详情

ajax 发布请求 - 跨域读取阻塞 (CORB) 阻止跨域响应 CORS

...B)blockedcross-originresponseCORS【发布时间】:2019-01-2211:48:26【问题描述】:我有一个jquery前端项目,它使用ajax向我的ASMXWebservice(c#)发送POST请求。一切正常,而不是一个特殊的要求。该应用程 查看详情

CORB:JSFiddle 上的跨域读取阻塞

...in.js.gz,但现在我得到了:CORB:跨域读取阻塞有没有办法解决这个问题?JSFiddle:https://jsf 查看详情

跨域读取阻止 (CORB) 阻止了跨域响应 https://cdnjs.com/libraries/Chart.js

...:我想使用chart.js,但我遇到了这个错误,有人愿意帮我解决问 查看详情

如何避免 chrome web 扩展中的跨域读取阻塞(CORB)

】如何避免chromeweb扩展中的跨域读取阻塞(CORB)【英文标题】:HowtoavoidCross-OriginReadBlocking(CORB)inachromewebextension【发布时间】:2019-07-1403:50:46【问题描述】:我写了一个chromewebextension来避免在开发自己的网络应用程序时出现CORS限... 查看详情

Spring Security 跨域读取阻塞 (CORB) - Angular App

...iginReadBlocking(CORB)-AngularApp【发布时间】:2019-12-2504:27:30【问题描述】:我有一个Angular4应用程序,可以显示用户的信息资料。该应用程序位于https://www.myapp.com,但用户的头像位于https://s3-sa-east-1.a 查看详情

Chrome 73 中阻止的 CORB OPTIONS 请求

...BOPTIONSRequestsBlockedinChrome73【发布时间】:2019-09-0108:03:46【问题描述】:似乎在最近的Chrome版本中(或者至少最近在调用我的API时---直到今天才看到它),Google正在发出有关CORB请求被阻止的警告。跨域读取阻止(CORB)阻止了MIME类型... 查看详情

使用带有 Nuxt js 的 axios 从 Directions API 获取数据时的跨域读取阻塞 (CORB)

...DirectionsAPIusingaxioswithNuxtjs【发布时间】:2019-02-0700:57:11【问题描述】:在我的Nuxt项目中,我使用vue2-google-maps库创建地图和axios以从MapAPI获取数据。 查看详情

Laravel 如何解决跨域请求被阻止

】Laravel如何解决跨域请求被阻止【英文标题】:LaravelHowtosolveCross-OriginRequestBlocked【发布时间】:2020-09-3011:29:45【问题描述】:我想通过api读取一个pdf文件,但它给了我这个错误:Cross-OriginRequestBlocked:TheSameOriginPolicydisallowsreadingth... 查看详情

如何删除 CORB 警告?

】如何删除CORB警告?【英文标题】:HowcanIremovetheCORBwarning?【发布时间】:2019-08-0420:13:24【问题描述】:Chrome一直工作到版本73。现在它向我抛出了一个CORB警告并阻止我的chrome扩展程序运行。这是我的ajaxjquery代码,没什么特别的... 查看详情

跨域请求被阻止 - 这可以通过启用 CORS 来解决

】跨域请求被阻止-这可以通过启用CORS来解决【英文标题】:Cross-OriginRequestBlocked-ThiscanbefixedbyenablingCORS【发布时间】:2014-09-0616:52:04【问题描述】:我正在尝试在我的AngularJS应用程序中向rottentomatoesAPI发出一个简单的httpGET请求,... 查看详情

跨域请求被阻止

...:Cross-OriginRequestBlockedon【发布时间】:2014-06-2917:58:23【问题描述】:我有一个WordPress网站,但我收到了来自我的GodaddySeal的错误。我在网站页脚的小部件部分中有用于验证图像的html。当我重新加载页面并检查firebug时,我在控制... 查看详情

Chrome CORB 阻止 APIGateway lambda 请求

...RBblockingAPIGatewaylambdarequest【发布时间】:2018-12-0104:26:57【问题描述】:什么有效我制作了一个简单的文字游戏。它工作得很好。用户要求的一件事是单词有效性检查。我在AWSLambdaProxy/Node.js端点上运行oxford字典api,当我通过浏览... 查看详情

跨域请求被阻止:同源策略不允许读取远程资源

...sallowsreadingtheremoteresourceat【发布时间】:2014-08-0215:38:49【问题描述】:我在我的网站中使用CometChat,最近我的用户在接收消息时遇到了这个问题。在FireBug中检查后,我意识到脚本失败一定是因为CORS保护(由于以下错误 查看详情

reactjs中的跨域读取阻塞错误

...-OriginReadBlockingErrorinreactjs【发布时间】:2019-07-1300:12:05【问题描述】:我正在学习ReactJS。我正在使用fetch从API获取数据。我使用了下面的代码。fetch(\'http://myurl.com/api\').then(res=>res.json()).then(res=>console.log(r 查看详情

如何解决跨域问题(代码片段)

(1)考察目标1)跨域出现的原因2)解决的跨域的方式有哪些。(2)题目分析1)跨域出现的原因:同源策略。什么是同源策略:同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策... 查看详情

Angular和NodeJS阻止了跨域请求[重复]

...edwithAngularandNodeJS[duplicate]【发布时间】:2019-12-1909:15:29【问题描述】:我正在尝试获取与来源不同的url的文本/html,但由于CORS阻塞,我无法获取POST。我以这种方式进行有角度的申请:constexpress=require(\'express\');cons 查看详情