Let's start off by saying what serving the pages with these headers means.

If you have ever built an API with Express.js for example, you'll be familiar with this. Essentially, it means that when the user makes a GET request to see the web page, you will have to send some additional information in the form of HTTP headers.

Specifically, the first header prevents your page from loading any cross-origin resources that don't explicitly grant permission. The second one means that you can't share a browsing context group with any cross-origin documents. Both of these are used as safety measures to prevent cross-origin attacks. Even though you may not be requesting anything, you have to apply them.

Now onto your problem, I would recommend installing the Chrome extension CORS. I don't know exactly how it works, but I have used it in the past and it will be a temporary solution. I skimmed through the tutorial you're following and I didn't see a server setup (as in Express.js/Node's http for instance). If you had any of these you could pass the headers as arguments to the servers.

To check if the CORS settings are working as intended, add the following code to your app:

if (crossOriginIsolated) {
    // Works
}

The SharedArrayBuffer serves the purpose of sharing data buffers between your main browsing context and another agent (another web page or a worker).

However, to minimize the possible security vulnerabilities, the specification states that this API can only be operated in a secure context.

In addition to this security prerequisite, it is also necessary for any top-level document to be in a Cross Origin Isolation. This means, the party serving the contents should tell the browser that it should block the loading of cross-origin resources. (A document from domain A trying to get data from Domain B)

This is done by the servers by specifying the following two response eaders when serving the website:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

How to specify them in your debug environment?

You need to set up a standard file server such as Apache. Then you will have to tweak its configuration to serve the above headers with the files.

Quick setup: https://www.wampserver.com/en/

An answer provisioning the header info: https://stackoverflow.com/a/35566100/4185234

I ran into this recently and found your question and the answers above

What does serving the pages with these headers mean?

It means configuring the server serving your pages to include those headers. How you configure a server depends on the software you're using, Apache, Nginx, Caddy, or if you're using one of the 1000s of others or writing your own.

I've written 2 (or more correctly, I've used a library to write 2) and I added the option to include those headers. Both are open source so you can look inside if you want to see how they work.

If you prefer a UI then there's this one. If you prefer the command line then install node.js and then you can use this one