如何阻止CORB阻止对以CORS标头响应的数据资源的请求？ [英] How to stop CORB from blocking requests to data resources that respond with CORS headers?
问题描述
我正在开发Chrome扩展程序，该扩展程序可以将某些网站的请求发送到我控制的API。直到Chrome 73，该扩展程序才能正常工作。升级到Chrome 73之后，我开始出现以下错误：
I am developing a Chrome extension which makes requests from certain websites to an API I control. Until Chrome 73, the extension worked correctly. After upgrading to Chrome 73, I started getting the following error:
跨源读取阻止（CORB）阻止了跨源响应
http：// localhost：3000 / api / users / 1 ，MIME类型为application / json
Cross-Origin Read Blocking (CORB) blocked cross origin response http://localhost:3000/api/users/1 with MIME type application/json
根据 Chrome有关CORB的文档，如果满足以下所有条件，则CORB将阻止请求的响应：
According to Chrome's documentation on CORB, CORB will block the response of a request if all of the following are true:
-
资源是数据资源。具体来说，内容类型为HTML，XML，JSON
The resource is a "data resource". Specifically, the content type is HTML, XML, JSON
服务器使用 X-Content-Type-Options进行响应：nosniff 标头，或者如果省略此标头，Chrome会通过检查文件来检测内容类型是HTML，XML还是JSON之一
The server responds with an X-Content-Type-Options: nosniff header, or if this header is omitted, Chrome detects the content type is one of HTML, XML, or JSON from inspecting the file
CORS does not explicitly allow access to the resource
youtu.be/dBuykrdhK-A?t=1563 rel = noreferrer> Spectre and Meltdown的经验教训（Google I / O 2018），添加<$ c $似乎很重要c> mode：cors 到 fetch 调用，即 fetch（url，{mode：'cors'}）。
Also, according to "Lessons from Spectre and Meltdown" (Google I/O 2018), it seems like it may be important to add mode: cors to fetch invocations, i.e., fetch(url, { mode: 'cors' }).
为解决此问题，我进行了以下更改：
To try to fix this, I made the following changes:
首先，我将以下标头添加到来自我的API的所有响应：
First, I added the following headers to all responses from my 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（）调用，如下所示：
Second, I updated my fetch() invocation on the extension to look like this:
fetch(url, { credentials: 'include', mode: 'cors' })
但是，这些更改无效。我该如何更改以使我的请求不会被CORB阻止？
However, these changes didn't work. What can I change to make my request not be blocked by CORB?
推荐答案
基于 Chrome扩展程序内容脚本中对跨域请求的更改 ，我替换了所有使用新方法 fetchResource 调用 fetch ，该方法具有类似的API，但委托了 fetch 调用后台页面：
Based on the examples in "Changes to Cross-Origin Requests in Chrome Extension Content Scripts", I replaced all invocations of fetch with a new method fetchResource, that has a similar API, but delegates the fetch call to the background page:
// contentScript.js
function fetchResource(input, init) {
return new Promise((resolve, reject) => {
chrome.runtime.sendMessage({input, init}, messageResponse => {
const [response, error] = messageResponse;
if (response === null) {
reject(error);
} else {
// Use undefined on a 204 - No Content
const body = response.body ? new Blob([response.body]) : undefined;
resolve(new Response(body, {
status: response.status,
statusText: response.statusText,
}));
}
});
});
}
// background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
fetch(request.input, request.init).then(function(response) {
return response.text().then(function(text) {
sendResponse([{
body: text,
status: response.status,
statusText: response.statusText,
}, null]);
});
}, function(error) {
sendResponse([null, error]);
});
return true;
});
这是我能够对应用程序进行修复的最小更改集。 （注意，扩展名和后台页面只能在它们之间传递JSON可序列化的对象，因此我们不能简单地将Fetch API Response对象从后台页面传递到扩展名。）
This is the smallest set of changes I was able to make to my app that fixes the issue. (Note, extensions and background pages can only pass JSON-serializable objects between them, so we cannot simply pass the Fetch API Response object from the background page to the extension.)
背景页面不受CORS或CORB的影响，因此浏览器不再阻止来自API的响应。
Background pages are not affected by CORS or CORB, so the browser no longer blocks the responses from the API.
这篇关于如何阻止CORB阻止对以CORS标头响应的数据资源的请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
