跨域读取阻止（CORB）

我已经使用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成功方法的响应。

请帮帮我。

 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权限外，您还需要进行飞行前检查。

在大多数情况下，被阻止的响应不应影响网页的行为，并且可以安全地忽略CORB错误消息。例如，如果被阻止的响应的主体已经为空，或者响应将被传递到无法处理的上下文（例如HTML文档，例如404错误页面），则可能会出现警告交付给标签）。

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

我必须清理浏览器的缓存，正在此链接中进行读取，即如果请求得到空响应，则会收到此警告错误。我在请求中收到了一些CORS，因此该请求的响应为空，我所要做的就是清除浏览器的缓存，CORS消失了。我收到CORS的原因是Chrome浏览器将PORT号保存在了缓存中，由于缓存，服务器只接受了，localhost:3010而我正在这样做localhost:3002。

返回标头为“ Access-Control-Allow-Origin：*”的响应，检查以下代码以获取Php服务器响应。

<?php header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($phparray); 

您必须在服务器端添加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);

这个问题尚不清楚，但是假设这是在开发或测试客户端上发生的事情，并且考虑到您已经在使用Fiddler，则可以让Fiddler用allow响应进行响应：

• 在Fiddler中选择问题请求
• 打开AutoResponder标签
• 单击Add Rule并将规则编辑为：
  • 方法：OPTIONS 服务器网址，例如Method:OPTIONS http://localhost
  • *CORSPreflightAllow
• 检查一下 Unmatched requests passthrough
• 检查一下 Enable Rules

几个注意事项：

1. 显然，这只是开发/测试的解决方案，在这种情况下不可能/不可行地修改API服务
2. 检查您与第三方API提供程序的任何协议是否允许您执行此操作
3. 正如其他人指出的那样，这是CORS工作方式的一部分，最终需要在API服务器上设置标头。如果您控制该服务器，则可以自己设置标题。在这种情况下，由于它是第三方服务，因此我只能假定它们具有某种机制，可以通过该机制向其提供原始站点的URL，并且它们将相应地更新其服务以响应正确的标头。

如果您正在使用localhost，请尝试此操作，这是对我有用的唯一扩展名和方法（角度，仅javascript，无php）

https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjjbppifbc/related?hl=zh-CN

您是否尝试将dataTypeajax请求中的从更改jsonp为json？在我的情况下解决了这个问题。

在Chrome扩展程序中，您可以使用

chrome.webRequest.onHeadersReceived.addListener

重写服务器响应头。您可以替换现有的标题，也可以添加其他标题。这是您想要的标题：

Access-Control-Allow-Origin: *

https://developers.chrome.com/extensions/webRequest#event-onHeadersReceived

我陷入了CORB问题，这为我解决了问题。

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

跨域读取阻止（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.md

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

在这种情况下，有一个极端的案例值得一提：Chrome（至少是某些版本） 使用为CORB设置的算法检查CORS飞行前检查。IMO，这有点愚蠢，因为飞行前似乎不会影响CORB威胁模型，而且CORB似乎设计为与CORS正交。另外，CORS飞行前的身体无法接近，因此不会产生刺激性警告。

无论如何，请检查您的CORS飞行前响应（OPTIONS方法响应）是否没有主体（204）。内容类型为application / octet-stream且长度为零的空200在这里也适用。

您可以通过计算带有消息正文的CORB警告与OPTIONS响应来确认是否遇到这种情况。

当发送带有200的空响应时，似乎出现了此警告。

此配置在我.htaccess的Chrome上显示警告：

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST,GET,HEAD,OPTIONS,PUT,DELETE"
Header always set Access-Control-Allow-Headers "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* / [R=200,L]

但是将最后一行更改为

RewriteRule .* / [R=204,L]

解决问题！

我的Chrome扩展程序存在相同的问题。当我尝试将清单添加到清单的“ content_scripts”选项时，此部分：

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

然后从清单“ permissons”中删除另一部分：

"https://*/"

仅当我在XHR请求的其中一项中将CORB删除时，才将其删除。

最糟糕的是，我的代码中很少有XHR请求，只有一个开始出现CORB错误（为什么我不知道为什么CORB不适用于其他XHR；为什么清单更改导致了我不知道的错误）。这就是为什么我一次又一次地检查整个代码并浪费很多时间的原因。

如果您在野生动物园中进行操作不花时间，只需在“偏好设置”>“隐私”中启用开发人员菜单，然后从开发菜单中取消选择“禁用跨域限制”。如果只需要本地文件，则只需启用开发人员菜单，然后从开发菜单中选择“禁用本地文件限制”。

并在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

那应该禁用相同的原始策略，并允许您访问本地文件。

我遇到了此问题，因为来自服务器的jsonp响应的格式错误。错误响应如下。

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

问题是，里面的对象callback应该是正确的json对象，而不是json数组。因此，我修改了一些服务器代码并更改了其格式：

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

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

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