javascript - 跨源读取阻塞(CORB)




jquery ajax (10)

我使用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成功方法。

请帮帮我。


在大多数情况下,阻止的响应不应该影响网页的行为,并且可以安全地忽略CORB错误消息。 例如,当被阻止的响应的主体已经为空,或者响应将被传递到无法处理它的上下文时(例如,诸如404错误页面的HTML文档),可能发生警告。被送到标签)。

https://www.chromium.org/Home/chromium-security/corb-for-developers

我不得不清理浏览器的缓存,我正在阅读此链接,如果请求获得空响应,我们会收到此警告错误。 我的请求得到了一些CORS,所以这个请求的响应都是空的,我所要做的只是清除浏览器的缓存,而CORS却离开了。 我收到CORS是因为chrome已经在缓存中保存了PORT编号,服务器只接受 localhost:3010 而我正在使用 localhost:3002 ,因为缓存。


 dataType:'jsonp',

您正在发出JSONP请求,但服务器正在使用JSON进行响应。

浏览器拒绝尝试将JSON视为JSONP,因为这会带来安全风险。 (如果浏览器 确实 试图将JSON视为JSONP,那么它最多会失败)。

有关JSONP的更多详细信息,请参阅 此问题 。 请注意,在CORS可用之前使用的同源策略是一个讨厌的黑客。 CORS是一个更清洁,更安全,更强大的解决方案。

看起来你正试图制作一个跨原始的请求,并在一大堆相互矛盾的指令中抛出你能想到的一切。

您需要了解同源策略的工作原理。

有关详细指南,请参阅 此问题 。

现在关于你的代码的一些注释:

contentType: 'application/json',
  • 使用JSONP时会忽略此项
  • 您正在提出GET请求。 没有请求体来描述其类型。
  • 这将使跨域请求变得非简单,这意味着除了基本的CORS权限之外,您还需要处理飞行前的问题。

删除它。

 dataType:'jsonp',
  • 服务器没有响应JSONP。

删除它。 (您可以使服务器使用JSONP进行响应,但CORS更好)。

responseType:'application/json',

这不是jQuery.ajax支持的选项。 删除它。

xhrFields:{withCredentials:false},

这是默认值。 除非您使用ajaxSetup将其设置为true,否则请将其删除。

  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  • 这些是响应标头。 它们属于响应,而不是请求。
  • 这将使跨域请求变得非简单,这意味着除了基本的CORS权限之外,您还需要处理飞行前的问题。

你有没有尝试将ajax请求中的 dataTypejsonp 更改为 json ? 在我的情况下修复它。


响应标头通常在服务器上设置。 在服务器端将 'Access-Control-Allow-Headers''Content-Type'


如果你在safari中执行它,它会花费时间,只需从Preferences >> Privacy启用开发人员菜单,然后从开发菜单中取消选择“禁用跨源限制”。 如果只需要本地,则只需启用开发人员菜单,然后从开发菜单中选择“禁用本地文件限制”。

并在Chrome for OSX中打开终端并运行:

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

OSX上的Chrome 49+上需要--user-data-dir

对于Linux运行:

$ google-chrome --disable-web-security

此外,如果您尝试使用AJAX或JSON等开发目的访问本地文件,也可以使用此标志。

-–allow-file-access-from-files

对于Windows,请进入命令提示符并进入Chrome.exe所在的文件夹并键入

chrome.exe --disable-web-security

这应该禁用相同的源策略,并允许您访问本地文件。


如果您在Google Chrome中遇到问题,请尝试安装“Moesif CORS”扩展程序。 由于它是交叉原始请求,因此即使响应状态代码为200,chrome也不接受响应


我的Chrome扩展程序遇到了同样的问题。 当我尝试添加到我的清单“content_scripts”选项时,这部分:

//{
    //  "matches": [ "<all_urls>" ],
    //  "css": [ "myStyles.css" ],
    //  "js": [ "test.js" ]
    //}

我从我的清单“permissons”中删除了另一部分:

"https://*/"

只有当我删除它时,我的一个XHR上的CORB才会被拒绝。

最糟糕的是,我的代码中只有少数XHR需求,并且只有其中一个开始出现CORB错误(为什么CORB不会在其他XHR上显示我不知道;为什么显示更改会导致此错误,我不知道)。 这就是为什么我一次又一次地检查整个代码几个小时并且浪费了很多时间。


我遇到了这个问题,因为服务器的jsonp响应格式错误。 不正确的响应如下。

callback(["apple", "peach"])

问题是, callback 内的对象应该是一个正确的json对象,而不是一个json数组。 所以我修改了一些服务器代码并更改了它的格式:

callback({"fruit": ["apple", "peach"]})

浏览器在修改后愉快地接受了响应。


跨源读取阻塞(CORB),这种算法可以在Web浏览器到达网页之前识别并阻止可疑的跨源资源加载。它旨在防止浏览器提供某些跨源网络响应到一个网页。

首先确保使用正确的“ Content-Type ”提供这些资源,即对于JSON MIME类型 - “ text/json ”,“ application/json ”,HTML MIME类型 - “ text/html ”。

第二:将模式设置为cors,即 mode:cors

获取看起来像这样

 fetch("https://example.com/api/request", {
            method: 'POST',
            body: JSON.stringify(data),
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
                "Accept": 'application/json',
            }
        })
    .then((data) => data.json())
    .then((resp) => console.log(resp))
    .catch((err) => console.log(err))

参考: https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.mdhttps://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md

https://www.chromium.org/Home/chromium-security/corb-for-developers


您必须在服务器端添加CORS:

如果您正在使用 nodeJS, 那么:

首先,您 需要 使用以下命令 安装 cors

npm install cors --save

现在 将以下代码添加 到您的应用程序启动文件中( app.js or server.js

var express = require('express');
var app = express();

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);






cross-origin-read-blocking