[dev-server] document recommended middleware

[LarsDenBakker]

We should document middleware that we recommend to do common things, such as:

• cors
• compression
• proxy

[DeadWisdom]

In case anyone gets here as I did, here is my config that allows CORS requests using @koa/cors. By default, it will just allow everything, but for a dev server, I think that's probably reasonable:

> npm install @koa/cors --save-dev

//web-dev-server.config.mjs
import cors from '@koa/cors';

export default {
    open: true,
    nodeResolve: true,
    middleware: [cors()]
};

[explorigin]

As a followup, @koa/cors didn't work for me but koa-cors did.

[sterankin]

I tried both these above using @koa/cors and koa-cors but still having issues.

Here is my: web-dev-server.config.js

import cors from 'koa-cors';

export default {
    open: true,
    nodeResolve: true,
    middleware: [cors()]
};

server starts:

wds --watch

koa deprecated Support for generators will be removed in v3. See the documentation for examples of how to convert old middleware https://github.com/koajs/koa/blob/master/docs/migration.md node_modules/@web/dev-server-core/dist/server/createServer.js:52:13
Web Dev Server started...

  Local:    http://localhost:8000/

But when I try to pull in the JS file I am serving into another project I get a cors error:
Access to script at 'http://localhost:8000/some.js' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8000' that is not equal to the supplied origin.

[augonis]

I've encountered the behavior described by @sterankin as well. I tracked the cause to pluginTransformMiddleware overwriting CORS headers set by @koa/cors with the ones from a previous cached response.

If the solution would be making pluginTransformMiddleware not overwrite existing headers on the response, I could make a PR.

[btopro]

diff --git a/node_modules/@web/dev-server-core/dist/middleware/serveFilesMiddleware.js b/node_modules/@web/dev-server-core/dist/middleware/serveFilesMiddleware.js
index 36c6de2..fab0a7c 100644
--- a/node_modules/@web/dev-server-core/dist/middleware/serveFilesMiddleware.js
+++ b/node_modules/@web/dev-server-core/dist/middleware/serveFilesMiddleware.js
@@ -17,7 +17,9 @@ function serveFilesMiddleware(rootDir) {
         brotli: false,
         gzip: false,
         setHeaders(res) {
-            res.setHeader('cache-control', 'no-cache');
+          res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+          res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');    
+          res.setHeader('cache-control', 'no-cache');
         },
     };
     // the wds-root-dir parameter indicates using a different root directory as a path relative