fix: apply middleware before internal middleware; add CORS support (#7)

Author: reifiedbeans

lib/index.ts

@@ -1,18 +1,16 @@
 import { Plugin } from "vite";
 
 import { Config } from "./config.ts";
-import { createMiddleware } from "./middleware.ts";
+import applyMiddleware from "./middleware.ts";
 
 export default function serveStatic(config: Config): Plugin {
   return {
     name: "serve-static",
     configureServer(server) {
-      const middleware = createMiddleware(config, server.config.logger);
-      return () => server.middlewares.use(middleware);
+      applyMiddleware(server, config);
     },
     configurePreviewServer(server) {
-      const middleware = createMiddleware(config, server.config.logger);
-      return () => server.middlewares.use(middleware);
+      applyMiddleware(server, config);
     },
   };
 }

lib/middleware.ts

@@ -1,10 +1,11 @@
+import corsMiddleware from "cors";
 import fs from "fs";
 import { contentType } from "mime-types";
 import path from "path";
-import { Connect, Logger } from "vite";
+import { Connect, Logger, PreviewServer, ViteDevServer } from "vite";
 
 import { Config as PluginConfig } from "./config.ts";
-import { setupLogger } from "./utils.ts";
+import { isDevServer, setupLogger } from "./utils.ts";
 
 export function createMiddleware(
   config: PluginConfig,
@@ -46,3 +47,20 @@ export function createMiddleware(
     return next();
   };
 }
+
+export default function applyMiddleware(
+  server: ViteDevServer | PreviewServer,
+  pluginConfig: PluginConfig,
+) {
+  const pluginMiddleware = createMiddleware(pluginConfig, server.config.logger);
+  const corsConfig = isDevServer(server) ? server.config.server.cors : server.config.preview.cors;
+
+  // https://github.com/vitejs/vite/blob/fcf50c2e881356ea0d725cc563722712a2bf5695/packages/vite/src/node/server/index.ts#L852-L854
+  if (corsConfig !== false) {
+    const config = typeof corsConfig === "boolean" ? {} : corsConfig;
+    // @ts-expect-error CorsOptions type is incompatible in Vite (waiting for fix in https://github.com/vitejs/vite/pull/17836)
+    server.middlewares.use(corsMiddleware(config));
+  }
+
+  server.middlewares.use(pluginMiddleware);
+}

lib/utils.ts

@@ -1,4 +1,9 @@
-import { LogOptions, Logger } from "vite";
+import { LogOptions, Logger, PreviewServer, ViteDevServer } from "vite";
+
+// https://github.com/vitejs/vite/blob/e961b31493f8493277b46773156cc6e546b9c86b/packages/vite/src/node/utils.ts#L1353-L1357
+export function isDevServer(server: ViteDevServer | PreviewServer) {
+  return "pluginContainer" in server;
+}
 
 type LogFunction = (msg: string, options?: LogOptions) => void;
 export function setupLogger(logger: Logger) {

package-lock.json

@@ -31,10 +31,12 @@
     "vite": "^5.0.0"
   },
   "dependencies": {
+    "cors": "^2.8.5",
     "mime-types": "^2.1.35"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/cors": "^2.8.17",
     "@types/mime-types": "^2.1.4",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
     "@typescript-eslint/parser": "^7.0.1",