fix SharedArrayBuffer undefined problem

.env.example

@@ -23,7 +23,8 @@ MONGO_URL=mongodb://localhost:27017/p5js-web-editor
 PORT=8000
 PREVIEW_PORT=8002
 EDITOR_URL=http://localhost:8000
-PREVIEW_URL=http://localhost:8002
+PREVIEW_URL=http://localhost:8000/preview
+PREVIEW_SERVER_URL=http://localhost:8002
 S3_BUCKET=<your-s3-bucket>
 S3_BUCKET_URL_BASE=<alt-for-s3-url>
 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production

package.json

@@ -253,6 +253,7 @@
     "fuse.js": "^6.6.2",
     "history": "^4.10.1",
     "htmlhint": "^0.15.1",
+    "http-proxy-middleware": "^3.0.5",
     "i18next": "^19.9.2",
     "i18next-http-backend": "^1.2.6",
     "is-url": "^1.2.4",

server/previewServer.js

@@ -42,7 +42,7 @@ mongoose.connection.on('error', (err) => {
 const allowedCorsOrigins = [
   /p5js\.org$/,
   process.env.EDITOR_URL,
-  process.env.PREVIEW_URL
+  process.env.PREVIEW_SERVER_URL
 ];
 
 // to allow client-only development

server/server.js

@@ -8,6 +8,7 @@ import MongoStore from 'connect-mongo';
 import passport from 'passport';
 import path from 'path';
 import basicAuth from 'express-basic-auth';
+import { createProxyMiddleware } from 'http-proxy-middleware';
 
 // Webpack Requirements
 import webpack from 'webpack';
@@ -33,12 +34,19 @@ import { get404Sketch } from './views/404Page';
 
 const app = new Express();
 
+app.use((req, res, next) => {
+  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
+  res.setHeader('Cross-Origin-Resource-Policy', 'same-origin');
+  next();
+});
+
 app.get('/health', (req, res) => res.json({ success: true }));
 
 const allowedCorsOrigins = [
   /p5js\.org$/,
   process.env.EDITOR_URL,
-  process.env.PREVIEW_URL
+  process.env.PREVIEW_SERVER_URL
 ];
 
 // to allow client-only development
@@ -176,6 +184,19 @@ app.use('/api', (error, req, res, next) => {
   next(error);
 });
 
+app.use(
+  '/preview',
+  createProxyMiddleware({
+    target: process.env.PREVIEW_SERVER_URL,
+    changeOrigin: true,
+    onProxyRes(proxyRes) {
+      proxyRes.headers['Cross-Origin-Opener-Policy'] = 'same-origin';
+      proxyRes.headers['Cross-Origin-Embedder-Policy'] = 'require-corp';
+      proxyRes.headers['Cross-Origin-Resource-Policy'] = 'same-origin';
+    }
+  })
+);
+
 // Handle missing routes.
 app.get('*', async (req, res) => {
   res.status(404);