How to set HTTP headers for WebWorker files in Gatsby dev environment?

[jens-duttke]

I'm using WebWorkers in a Gatsby-based website (by injecting the Webpack worker-loader into the Webpack configuration of Gatsby). I want to use SharedArrayBuffer, which requires to set the Cross-Origin-Embedder-Policy HTTP header.

Is there a way to add specific HTTP response headers for specific files in the Gatsby development environment?

Regarding the documentation, developMiddleware can be added to the gatsby-config.js. Unfortunately, this seems to work only for some file types (the generated html page, the page-data json files and some images), but neither for CSS files, nor for JS files.

I also tried to inject the devServer.headers object in the Webpack configuration, but Gatsby seems to ignore that completely.

The code to reproduce the problem and my approaches can be found here:
https://github.com/jens-duttke/gatsby-headers-demo

[ospfranco]

@jens-duttke did you find a solution?

[jens-duttke]

@ospfranco Back when I was using Gatsby v5.12.12, I solved this using the custom plugin below.

I've since migrated to Next.js, where enabling this behavior only requires a few lines in next.config.js. I can't guarantee that this solution still works with the latest Gatsby versions.

1. Create a plugins folder in your project root, if it doesn't already exist

2. Inside plugins, create a folder for the custom plugin called gatsby-plugin-dev-server-sharedarraybuffer-header

3. Add a package.json file with the following content to that folder:

{
  "name": "gatsby-plugin-dev-server-sharedarraybuffer-header",
  "private": true,
  "sideEffects": true,
  "engines": {
    "node": ">=14.0.0"
  }
}

4. Create gatsby-config.js in the same folder:

/** @type {import('gatsby').GatsbyConfig} */
module.exports = {
  /** @param {import('express').Application} app */
  developMiddleware: (app) => {
    app.use((req, res, next) => {
      res.set('Cross-Origin-Embedder-Policy', 'require-corp');
      res.set('Cross-Origin-Opener-Policy', 'same-origin');

      next();
    });

    // This is a workaround that manipulates Express's middleware stack. It may break with future versions of Gatsby or Express.
    /** @type {{ name: string; }[]} */
    const stack = app._router.stack;
    stack.splice(stack.findIndex((layer) => layer.name === 'middleware') + 1, 0, stack.splice(-1)[0]);
  }
};

5. Add the plugin to your root gatsby-config.js:

module.exports = {
  plugins: [
    'gatsby-plugin-dev-server-sharedarraybuffer-header'
  ]
};