交叉原点读取阻塞(CORB)

我已经使用 Jquery AJAX 调用了第三方 API:

使用 MIME 类型的 application/json 阻塞交叉原点读取阻塞(CORB)的交叉原点响应 我的网址。

我在 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 成功方法中得到。

请帮帮我。

499946 次浏览
小开

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

小开

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

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

Https://www.chromium.org/home/chromium-security/corb-for-developers

我必须清理浏览器的缓存，我正在读这个链接，如果请求得到一个空响应，我们得到这个警告错误。我的请求得到了一些 CORS，所以这个请求的响应是空的，我所要做的就是清除浏览器的缓存，CORS 跑掉了。我正在接收 CORS，因为 chrome 已经在缓存上保存了 PORT 编号，服务器将只接受 localhost:3010，而我正在执行 localhost:3002，因为缓存。

小开

这个问题并不清楚，但是假设这是在开发或测试客户端上发生的事情，并且假设您已经在使用 Fiddler，您可以让 Fiddler 响应允许响应:

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

一些注意事项:

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

你有没有试过把你的 Ajax 请求中的 dataType从 jsonp改成 json。

小开 
 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: { 凭证: 假} ,

这是默认设置。除非您在 ajaxSetup 中将其设置为 true，否则请删除它。

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

返回标题为“ Access-Control-allow-Origin: *”的响应 检查下面的 PHP 服务器响应代码。

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

如果你正在使用 localhost，试试这个，这是唯一一个适合我的扩展和方法(Angular，只有 javascript，没有 php)

Https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc/related?hl=en

小开

我遇到这个问题是因为来自服务器的 jsonp 响应的格式是错误的。错误的响应如下。

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

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

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

浏览器高兴地接受了修改后的响应。

小开

这里有一个值得一提的边缘案例: Chrome (至少是某些版本) 使用为 CORB 设置的算法检查 CORS 预飞行。在我看来，这有点愚蠢，因为飞行前似乎不会影响 CORB 的威胁模型，而 CORB 的设计似乎与 CORS 是正交的。此外，CORS 飞行前的身体是无法接近的，所以没有负面后果，只是一个恼人的警告。

无论如何，检查您的 CORS 飞行前响应(选择方法响应)没有一个机构(204)。一个空的200与内容类型的应用程序/八位流和长度零在这里也工作得很好。

您可以通过使用消息正文计算 CORB 警告和 OPTION 响应来确认是否是这种情况。

小开

尝试安装“ Moesif CORS”扩展，如果你面临的问题在谷歌铬。因为它是跨源请求，所以 chrome 不接受响应，即使响应状态码是200

小开

我的 Chrome 扩展也有同样的问题。当我试图添加到我的清单“ content _ script”选项时，这部分:

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

我把另一部分从名单上删除:

"https://*/"

只有当我删除它 CORBon 我的 XHR 请求之一消失。

最糟糕的是，在我的代码中几乎没有 XHR 请求，只有一个开始出现 CORB 错误(为什么 CORB 没有出现在其他 XHR 上，我不知道; 为什么清单更改导致了这个错误，我不知道)。这就是为什么我在几个小时内一遍又一遍地检查整个代码，浪费了很多时间。

小开

当发送一个包含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 扩展中，你可以使用

chrome.webRequest.onHeadersReceived.addListener

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

Access-Control-Allow-Origin: *

Https://developers.chrome.com/extensions/webrequest#event-onheadersreceived

我被 CORBs 的问题困住了，这个帮我解决了。

小开

我有一个类似的问题，我的情况是因为服务器响应的 contentType 是 application/json，而不是 text/javascript。

因此，我从我的服务器(spring mvc)解决了这个问题:

// http://127.0.0.1:8080/jsonp/test?callback=json_123456
@GetMapping(value = "/test")
public void testJsonp(HttpServletRequest httpServletRequest,
HttpServletResponse httpServletResponse,
@RequestParam(value = "callback", required = false) String callback) throws IOException {
JSONObject json = new JSONObject();
json.put("a", 1);
json.put("b", "test");
String dataString = json.toJSONString();


if (StringUtils.isBlank(callback)) {
httpServletResponse.setContentType("application/json; charset=UTF-8");
httpServletResponse.getWriter().print(dataString);
} else {
// important: contentType must be text/javascript
httpServletResponse.setContentType("text/javascript; charset=UTF-8");
dataString = callback + "(" + dataString + ")";
httpServletResponse.getWriter().print(dataString);
}
}

提交答案