React应用中SharedArrayBuffer弃用警告的成因与解决方法

Hey there! Let me break down this warning for you in plain, beginner-friendly terms—no confusing jargon allowed.

First, let’s get the basics straight: SharedArrayBuffer is a browser feature that lets different parts of your code (running in separate threads) share memory to work faster. But starting with Chrome version 91 (back in 2021), Google decided this feature needs extra security checks to prevent malicious attacks.

The warning is telling you: "Right now, your app isn’t meeting these security requirements to use SharedArrayBuffer. Soon, this feature might stop working entirely unless you fix it."

You mentioned you installed axios (production) and json-server (dev dependency). Chances are, one of your development tools (most likely json-server or a library it depends on) is quietly using SharedArrayBuffer under the hood. But your local dev server isn’t sending the special security headers Chrome needs to allow this feature, hence the warning.

The fix boils down to adding two simple HTTP headers to your development server. These headers tell Chrome your app is "cross-origin isolated"—meaning it’s only interacting with trusted, same-origin resources.

Option 1: If you’re running json-server directly #

If you start json-server with a command like json-server --watch db.json, here’s what to do:

1. Create a new file in your project root called add-headers.js with this code:

   module.exports = (req, res, next) => {
     // These two headers enable cross-origin isolation
     res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
     res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
     next();
   };
   

2. Update your json-server start command in package.json to use this middleware:

   json-server --watch db.json --middlewares ./add-headers.js
   

3. Restart json-server, and the warning should disappear.

Option 2: If you’re using json-server alongside React’s dev server (like create-react-app) #

If you’re running both React’s local server and json-server, you need to add the headers to React’s dev server too. Here’s how with create-react-app:

1. Install two helper packages first:

   npm install react-app-rewired customize-cra --save-dev
   

2. Create a file called config-overrides.js in your project root:

   const { override, devServer } = require('customize-cra');
   
   module.exports = override(
     devServer(configFunction) {
       return function (proxy, allowedHost) {
         const config = configFunction(proxy, allowedHost);
         // Add the security headers here
         config.headers = {
           'Cross-Origin-Opener-Policy': 'same-origin',
           'Cross-Origin-Embedder-Policy': 'require-corp',
         };
         return config;
       };
     }
   );
   

3. Update your package.json scripts to use react-app-rewired instead of the default react-scripts:

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test"
   }
   

4. Restart your React dev server, and the warning should be gone.

• The warning is a security notice from Chrome: SharedArrayBuffer now needs your app to be cross-origin isolated to function.
• It’s popping up because a dev tool (like json-server) uses this feature, but your server lacks the required security headers.
• Fix it by adding two HTTP headers to your dev server: Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp.

内容的提问来源于stack exchange，提问作者utsavojha95