[英]Cross-Origin Read Blocking (CORB)
我已经使用 Jquery AJAX 调用了第三方 API。 我在控制台中收到以下错误:
跨域读取阻止 (CORB) 阻止了 MIME 类型为 application/json 的跨域响应我的 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 可用之前使用的同源策略的问题,这是一个令人讨厌的 hack。 CORS 是一种更清洁、更安全、更强大的解决方案。
看起来你正试图提出一个跨域请求,并将你能想到的所有东西都扔进一大堆相互冲突的指令中。
您需要了解同源策略的工作原理。
有关深入指南,请参阅此问题。
现在有一些关于您的代码的注释:
contentType: 'application/json',
删除它。
dataType:'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', },
在大多数情况下,被阻止的响应不应影响网页的行为,并且可以安全地忽略 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 响应允许响应:
AutoResponder
选项卡Add Rule
并将规则编辑为:
Method:OPTIONS http://localhost
*CORSPreflightAllow
Unmatched requests passthrough
Enable Rules
几点注意事项:
如果您在本地主机上工作,试试这个,这是唯一对我有用的扩展和方法(Angular,只有 javascript,没有 php)
在 Chrome 扩展程序中,您可以使用
chrome.webRequest.onHeadersReceived.addListener
重写服务器响应标头。 您可以替换现有标题或添加其他标题。 这是你想要的标题:
Access-Control-Allow-Origin: *
https://developers.chrome.com/extensions/webRequest#event-onHeadersReceived
我被困在CORB问题上,这为我解决了这个问题。
您是否尝试过将 ajax 请求中的dataType
从jsonp
更改为json
? 在我的情况下解决了它。
在这种情况下,有一个值得一提的边缘案例: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]
解决问题!
响应头通常设置在服务器上。 在服务器端将'Access-Control-Allow-Headers'
设置为'Content-Type'
Cross-Origin Read Blocking (CORB),一种算法,通过该算法,Web 浏览器可以识别并阻止可疑的跨源资源加载到达网页之前。它旨在防止浏览器提供某些跨源网络响应到一个网页。
首先确保这些资源使用正确的“ Content-Type
”,即对于 JSON MIME 类型 - “ text/json
”,“ application/json
”,HTML MIME 类型 - “ text/html
”。
第二:将模式设置为 cors ie, 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
您不能直接从代码的客户端(前端)调用第三方API。 用于调用,您需要在Server中进行更改,但是您不能这样做。 在浏览器中,您将获得正常响应,但是从Js代码中,您将不会获得响应。 试试这个链接去这里
我有一个类似的问题。 我的情况是因为服务器响应的 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);
}
}
如果您在野生动物园中进行操作不花时间,只需在“偏好设置”>“隐私”中启用开发人员菜单,然后从开发菜单中取消选择“禁用跨域限制”。 如果只需要本地文件,则只需启用开发人员菜单,然后从开发菜单中选择“禁用本地文件限制”。
并在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
那应该禁用相同的原始策略,并允许您访问本地文件。
我的 Chrome 扩展程序也有同样的问题。 当我尝试将这部分添加到我的清单“content_scripts”选项时:
//{
// "matches": [ "<all_urls>" ],
// "css": [ "myStyles.css" ],
// "js": [ "test.js" ]
//}
我从我的清单“许可”中删除了另一部分:
"https://*/"
只有当我在我的 XHR 请求之一中删除它时,CORB 才会消失。
最糟糕的是,我的代码中几乎没有 XHR 请求,只有一个开始出现 CORB 错误(为什么我不知道其他 XHR 上没有出现 CORB;为什么清单更改会导致这个错误,我不知道)。 这就是为什么我花了几个小时一次又一次地检查整个代码并浪费了很多时间。
我遇到这个问题是因为服务器的jsonp响应格式不对。 错误的回答如下。
callback(["apple", "peach"])
问题是, callback
中的对象应该是正确的 json 对象,而不是 json 数组。 所以我修改了一些服务器代码并改变了它的格式:
callback({"fruit": ["apple", "peach"]})
浏览器愉快地接受了修改后的响应。
如果您在 google chrome 中遇到问题,请尝试安装“Moesif CORS”扩展程序。 由于它是跨源请求,因此即使响应状态代码为 200,chrome 也不接受响应
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.