如何阻止 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/jsonp>
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 未明确允许访问资源
CORS does not explicitly allow access to the resource
另外，根据 Spectre and Meltdown 的教训"(Google I/O 2018)，似乎将 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-serializable 对象，所以我们不能简单地将 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屋！
