HTTP-Headers

[higoka]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[x] Feature request
[ ] Documentation issue or request
[ ] Other: <!-- Please describe: -->

Current behavior

Im looking for a way to setup custom http headers for Live Server? I need to add the service-worker-allowed header.

Expected behavior

Being able to setup custom http headers in the Live Server config.

Environment

Browser:

- [x] Chrome (desktop) version: 69.0.3497.128
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:

- Live Server: 5.6.1
- Platform:  macOS Mojave 10.14.6
- Visual Studio Code: 1.38.1

Others

[TradeIdeasPhilip]

And these headers are becoming very important.

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

https://developer.chrome.com/blog/enabling-shared-array-buffer/#cross-origin-isolation

[lvcabral]

And these headers are becoming very important.

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

https://developer.chrome.com/blog/enabling-shared-array-buffer/#cross-origin-isolation

This needs to be addressed soon, as the Chrome 92 (to be released July 2021) will require this header configuration in order to allow SharedArrayBuffer among other features!

[lolaswift]

Hit the issue already.
Uncaught ReferenceError: SharedArrayBuffer is not defined

[creaktive]

Also having an issue with SharedArrayBuffer

[higoka]

It seems like this project is abandoned. There is now a official extension created by Microsoft called "Live Preview".
Here is the link: https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

[lolaswift]

Many thanks @higoka

[AndreVanKammen]

Ran into the same problem with SharedArrayBuffer couldn't find a solution (MS code has the same problem) so i hacked the extension on my local drive.

Find the file
.vscode\extensions\ritwickdey.liveserver-5.6.1\node_modules\cors\lib\index.js
.vscode\extensions\ritwickdey.liveserver-5.6.1\node_modules\live-server\index.js
in your user folder
Add these lines

	app.use((req, res, next) => {
		res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
		res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
		next();
	});

above this code

	if (cors) {
		app.use(require("cors")({
			origin: true, // reflecting request origin
			credentials: true // allowing requests with credentials
		}));
	}

Reload VSCode and you can use SharedArrayBuffer when you launch with live-server

[lolaswift]

@AndreVanKammen Many thanks for the solution!

[lolaswift]

@AndreVanKammen I'm using the same version but I couldn't find the code:
if (cors) {
app.use(require("cors")({
origin: true, // reflecting request origin
credentials: true // allowing requests with credentials
}));
}

[lolaswift]

@AndreVanKammen But I added your code to the following function and it worked. Still many thanks for your help!:
function cors(options, req, res, next) {
var headers = [],
method = req.method && req.method.toUpperCase && req.method.toUpperCase();

if (method === 'OPTIONS') {
  // preflight
  headers.push(configureOrigin(options, req));
  headers.push(configureCredentials(options, req));
  headers.push(configureMethods(options, req));
  headers.push(configureAllowedHeaders(options, req));
  headers.push(configureMaxAge(options, req));
  headers.push(configureExposedHeaders(options, req));
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
	  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
  applyHeaders(headers, res);

  if (options.preflightContinue) {
    next();
  } else {
    // Safari (and potentially other browsers) need content-length 0,
    //   for 204 or they just hang waiting for a body
    res.statusCode = options.optionsSuccessStatus;
    res.setHeader('Content-Length', '0');
    res.end();
  }
} else {
  // actual response
  headers.push(configureOrigin(options, req));
  headers.push(configureCredentials(options, req));
  headers.push(configureExposedHeaders(options, req));
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
	  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
  applyHeaders(headers, res);
  next();
}

}

[AndreVanKammen]

@lolaswift That should also work indeed, I see I referenced the wrong file. Fixed it in my original comment.

Be aware that the fix can be gone after an update or re-install.

[lolaswift]

@AndreVanKammen Many thanks again.
Live server is an awesome plugin. Hope the developer will keep updating it.

[OnkarRuikar]

@lolaswift I think it has been moved to https://github.com/microsoft/vscode-livepreview

[CoenraadS]

vscode-livepreview issue is here: microsoft/vscode-livepreview#375

If people want to add their thumbs-up to gain attention