How to deal with cross-origin issues when serving React files with Express?

Question

I want to have a node backend and a react frontend to run on the same server.

I have express set up like this:

const express = require("express");
const helmet = require("helmet")
const bodyParser = require("body-parser")
const http = require("http")
const cors = require("cors")
const { Worker, workerData } = require("worker_threads")
const fs = require("fs");

const port = 80
const app = express();
app.use(helmet());
app.use(cors());

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))


const server = http.createServer(app);


app.get("/", async (req, res) => {
    res.sendFile(__dirname + "/test.html")
})

server.listen(port, () => {
    console.log("Server listening on port " + port)
})

... and it shows "test.html" in the browser properly. Although console shows:

The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.

The page requested an origin-keyed agent cluster using the Origin-Agent-Cluster header, but could not be origin-keyed since the origin 'http://xxxxxxxxxx' had previously been placed in a site-keyed agent cluster. Update your headers to uniformly request origin-keying for all pages on the origin.

But when I switch to trying to serve a React build folder like so:

const express = require("express");
const helmet = require("helmet")
const bodyParser = require("body-parser")
const http = require("http")
const cors = require("cors")
const { Worker, workerData } = require("worker_threads")
const fs = require("fs");

const port = 80
const app = express();
app.use(helmet());
app.use(cors());

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

// ** adding this **

app.use(express.static("build"))

//**

const server = http.createServer(app);

// ** and changing this **

app.get("/", async (req, res) => {
    res.sendFile(__dirname + "/build/index.html")
})

// **

server.listen(port, () => {
    console.log("Server listening on port " + port)
})

The react page doesn't load. It seems the problem is loading js and css from their respective folders? I was thinking "express.static()" helps here as well, but I am obviously wrong...

Would appreciate any hint to help me solve this!

Here's what console gives back:

The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header. xxxxxxxxx/:1 The page requested an origin-keyed agent cluster using the Origin-Agent-Cluster header, but could not be origin-keyed since the origin 'http://xxxxxxxxxxxx' had previously been placed in a site-keyed agent cluster. Update your headers to uniformly request origin-keying for all pages on the origin. xxxxxxxxxxxx/:1 GET https://xxxxxxxxxx/static/css/main.073c9b0a.css net::ERR_CONNECTION_CLOSED xxxxxxxxxx/:1 GET https://xxxxxxxx/static/js/main.d36b2a27.js net::ERR_CONNECTION_CLOSED

Answer 1

Answering this question so that it may help others. most probably, helmet() is causing this security error; to immediately remove error: replace helmet() with helmet({ contentSecurityPolicy: false, }), BUT this can cause security issues. to read more about contentSecurityPolicy visit this link

NOTE: if it still behaves same, try deleting/reseting your browser settings/storage

Answer 2

On my end, simply closing Chrome and reopening worked to get rid of the message "Update your headers to uniformly request origin-keying for all pages on the origin"