标签: cross-origin-read-blocking

我使用Jquery AJAX调用了第三方API.我在控制台中收到以下错误:

跨源读取阻止(CORB)阻止了具有MIME类型application/json的跨源响应MY URL.有关详细信息,请参阅https://www.chromestatus.com/feature/5629709824032768.

我使用以下代码进行Ajax调用:

$.ajax({
  type: 'GET',
  url: My Url,
  contentType: 'application/json',
  dataType:'jsonp',
  responseType:'application/json',
  xhrFields: {
    withCredentials: false
  },
  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.log("FAIL....=================");
  }
});

当我在Fiddler中检查时,我得到的数据是响应但不是Ajax成功方法.

请帮帮我.

我正在开发一个Chrome扩展程序，该扩展程序可以将某些网站的请求发送到我控制的API。直到Chrome 73，该扩展程序才能正常工作。升级到Chrome 73之后，我开始出现以下错误：

跨域读取阻止（CORB）使用MIME类型application / json 阻止了跨源响应 http：// localhost：3000 / api / users / 1

根据Chrome关于CORB的文档，如果满足以下所有条件，则CORB将阻止请求的响应：

1. 该资源是“数据资源”。具体来说，内容类型为HTML，XML，JSON

2. 服务器以X-Content-Type-Options: nosniff标头作为响应，或者如果省略标头，则Chrome通过检查文件来检测内容类型是HTML，XML还是JSON之一

3. CORS不允许显式访问资源

另外，根据“从幽灵和熔化的教训”（谷歌I / O 2018） ，现在看来似乎可能增加是重要的mode: cors，以fetch调用，即fetch(url, { mode: 'cors' })。

为了解决此问题，我进行了以下更改：

首先，我向API的所有响应添加了以下标头：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Origin: https://www.example.com

其次，我fetch()将扩展名的调用更新为如下形式：

fetch(url, { credentials: 'include', mode: 'cors' })

但是，这些更改不起作用。我该如何更改以使我的请求不会被CORB阻止？

什么有效

我有一个简单的文字游戏我已经建立.它很棒.用户要求的一件事是单词有效性检查.我在AWS Lambda Proxy/Node.js端点上运行牛津词典api,当我通过浏览器访问APIGateway uri时,它运行良好.

我选择了AWS Lambda函数来保护我的Oxford API密钥,并且具有更直接的CORS控制.

采取的步骤

我在AWS APIGateway中启用了CORS,并在开发期间使用了"*"通配符.

我开始使用我的本地服务器@ 127.0.0.1对游戏进行编码.

遇到错误

我遇到了以下问题:

myproject.html:57跨源读取阻止(CORB)阻止跨源响应https://XXXXXXXXXXX.execute-api.us-east-2.amazonaws.com/prod/dictionary?word=help与MIME类型application/JSON.有关详细信息,请参阅https://www.chromestatus.com/feature/5629709824032768.getWord @ myproject.html:57(匿名)@ myproject.html:67

客户端代码

我正在使用简单的提取:

         var base_url = "https://XXXXXXXXXXX.execute-api.us-east-2.amazonaws.com/prod/dictionary?word=";
            getWord = function(word){
               fetch(base_url+word, {
                    headers: {
                        'content-type': 'application/json'
                    },
                    method: 'GET', 
                    mode: 'cors'
               }).then(function(response) {
                    console.log(response);
               });
            }

这个问题

我从未听说过CORB.我不明白什么是触发CORB,以及解决这个问题的步骤是什么.如何解决CORB问题？

我有一个服务器端呈现的Angular应用程序,我在其中使用ng2-adsense在某些路由上显示AdSense广告.我注意到大部分时间(并非所有时间),我的广告都没有显示,我在Chrome开发者控制台中收到警告说:

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.google.com/ads/measurement/l?ebcid=REDACTED with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
(anonymous) @ ads:1
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://googleads4.g.doubleclick.net/pcs/view?xai=REDACTED &sig=REDACTED &urlfix=1&adurl= with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://pagead2.googlesyndication.com/pagead/gen_204?id=sodar&v=24&t=2&bgai=REDACTED&bg=REDACTED with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

我假设这是因为我的AdSense广告单元是动态加载的(必须是,广告只显示在客户端渲染上),而不是页面加载.

CORB的链接文档引用了一种模糊算法,用于确定哪些资源负载是安全的.如何防止CORB阻止我的广告？

我编写了chrome网站扩展程序，以避免在开发自己的网络应用程序时出现CORS限制。该扩展程序是开发人员的工具，用于将请求从源URL代理到目标URL。

这样的扩展核心代码，因此开发人员可以在我的网站上开发其页面并向其服务器端请求，而不受CORS的限制：

chrome.webRequest.onBeforeRequest.addListener(details => {
  let redirectUrl = '';
  //...
  redirectUrl = details.url.replace(TNT.validRules[i].source, TNT.validRules[i].dest);
 return {redirectUrl}
}, {urls: ['<all_urls>']}, ['blocking']);


chrome.webRequest.onHeadersReceived.addListener(details => {
  details.responseHeaders.map(item => {
    if (item.name.toLowerCase() == 'Access-Control-Allow-Origin'.toLowerCase()) {
      item.value = '*'
    }
  })
  return {responseHeaders};
}, {urls: ['<all_urls>']}, ["blocking", "responseHeaders"]);

但是最新的Chrome 72无法代理该请求。控制台错误是：

跨域读取阻止（CORB） 使用MIME类型application / json 阻止了跨域响应 https://xxxxxxx.com/abc.json?siteId=69。有关更多详细信息，请参见 https://www.chromestatus.com/feature/5629709824032768。

Chrome更新之前，我的代码运行正常。

我向服务器发出ajax调用。我的服务器收到呼叫，将JSON返回给客户端，但是答案始终为空。当我查看Fiddler时，会从服务器得到答案。

我尝试使用JQuery，也尝试使用xmlhttp调用。总是一样的结果

是否有新的CORS政策规则适用？

有我的xmlHTTP调用

 var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
      var theUrl = "URL";
      xmlhttp.open("POST", theUrl);
      xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      xmlhttp.send('{ "args" :{ "Obj":"my obj"}}');
      xmlhttp.onreadystatechange = function(state,xhh,aaa){
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
          alert(xmlhttp.responseText);
        }
      }

Ajax调用类似

$.ajax({
        url: "URL",
        data: '{ "args" :{ "Obj":"my obj"}}',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        async: false,       
        error: function (xhr, ajaxOptions, thrownError) {
          if (that.Fail != null) {
            that.Fail();
          }
        },
        success : function(data){

           alert(data);

        }
      })

看来，在最近的Chrome版本中（或至少在最近对我的API的调用时-直到今天才看到它），Google都发出有关CORB请求被阻止的警告。

跨域读取阻止（CORB）阻止了MIME类型为text / plain的跨域响应[域]。有关更多详细信息，请参见https://www.chromestatus.com/feature/5629709824032768。

我确定对我的API的请求成功，并且是操作前OPTIONS请求在控制台中触发了警告。

正在调用API的应用程序并未明确提出OPTIONS请求，而是我已经了解到，这是在发出跨域请求时由浏览器强制执行的，并由浏览器自动完成。

我可以确认OPTIONS请求响应未定义mime类型。但是，我有些困惑，因为据我所知，OPTIONS响应只是标头，不包含正文。我不明白为什么这样的请求需要定义mime类型。

此外，控制台警告指出请求已被阻止；但是各种POST和GET请求都成功了。如此看来，OPTIONS请求实际上并未被阻止？

这是一个三部分的问题：

1. 没有正文响应时，为什么OPTIONS请求需要定义mime类型？
2. 如果不适合使用纯文本/纯文本，那么对于OPTIONS请求，MIME类型应该是什么？我会认为application / json是正确的吗？
3. 如何配置我的Apache2服务器以包括所有飞行前OPTIONS请求的mime类型？

我想调试 Chrome 74 中可能由 CORB 引起的本地开发环境问题。我想看看当我关闭 CORB 时问题是否会消失。

据谷歌开发者文档称

您可以通过使用以下命令行标志启动 Chrome 来暂时禁用 CORB，以确认问题是否由 CORB 引起： --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

但是，如果我跑

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating --user-data-dir="C:/ChromeDevSession"

Chrome 仍然显示 CORB 警告并根据请求进行阻止。

为了不使用 jQuery（如果ajax这是我所需要的），我进行了以下ajax调用，效果非常好。

$.ajax({
  type: "POST",
  url: "/Tests/EEG/Portable/Index?handler=Testing",
  beforeSend: function (xhr) {
    xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
  },
  data: JSON.stringify(model),
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (response) {
    alert("Success");
  },
  failure: function (response) {
    alert(response);
  }
});

我用标准 JavaScript 重写了它，fetch如下所示：

fetch("/Tests/EEG/Portable/Index?handler=Testing", {
  method: "POST",
  headers: {
    'XSRF-TOKEN': $('input:hidden[name="__RequestVerificationToken"]').val(),
    'content-type': 'application/json; charset=utf-8'
  },
  body: JSON.stringify(model)
}).then(checkStatus)
  .then(function (data) {
    alert("second then");
}).catch(function (error) {
  console.log(error);
});

这给了我以下错误：

无法加载https://stubidp.sustainsys.com/xxx?SAMLRequest=xxx：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问来源“ http://localhost:58659 ”。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

这导致我添加以下属性：

mode: 'no-cors' …

我正在使用WooCommerce PayPal Checkout网关，但我刚刚注意到，当我加载显示PayPal付款选项的结帐页面时，会在控制台中收到此消息：

跨域读取阻止（CORB）阻止了MIME类型为text / html的跨域响应 https://www.paypal.com/xoplatform/logger/api/logger。有关 更多详细信息，请参见https://www.chromestatus.com/feature/5629709824032768。

这是可能引起问题的东西，还是没什么好担心的？

如果有问题，知道如何解决吗？