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

Question

警告是：

jquery-1.9.1.js:8526 跨源读取阻止 (CORB) 阻止了跨源响应 https://www.metaweather.com/api/location/search/?query=lo with MIME type application/json. See 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 个小时但没有解决方案... 预先感谢您的帮助...

Answer 1

我不认为这是一个绝对的答案，因为我在构建的 chrome 扩展中也有同样的错误。现在，根据 CORB（Cross Origin Read Blocking）的建议，Chrome 团队更新了 73+ 版本的浏览器安全性，以防止 spectre 和 meltdown 漏洞。

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

它的父资源是：https://www.chromestatus.com/feature/5629709824032768 当我找到我的修复时，我将用它更新这个 post。

Answer 2

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

If an extension's background page simply fetches and relays any URL of a content script's choice (effectively acting as an open proxy), then similar security problems occur. That is, a compromised renderer process can hijack the content script and ask the background page to fetch and relay sensitive URLs of the attacker's choosing. Instead, background pages should only fetch data from URLs the extension author intends, which is ideally a small set of URLs which does not put the user's sensitive data at risk.

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

How To Solve This Problem : Cross-Origin Read Blocking (CORB) blocked cross-origin response

ajax

jquery

json

cross-origin-read-blocking