fix: apply middleware before internal middleware; add CORS support

Author: reifiedbeans

lib/__tests__/middleware.test.ts

@@ -5,7 +5,7 @@ import { Connect } from "vite";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import { Config } from "../config.ts";
-import middleware from "../middleware.ts";
+import { createMiddleware } from "../middleware.ts";
 
 vi.mock("fs");
 const mockCreateReadStream = vi.mocked(fs.createReadStream);
@@ -63,12 +63,12 @@ describe("middleware", () => {
         resolve: "./hello",
       },
     ];
-    const middlewareFn = middleware(config);
+    const middleware = createMiddleware(config);
     const req = mockReq({ url: "/hello" });
     const res = mockRes();
 
     // when
-    middlewareFn(req, res, mockNext);
+    middleware(req, res, mockNext);
 
     // then
     expect(res.writeHead).toHaveBeenCalledWith(200, expectedHeaders(50, undefined));
@@ -104,7 +104,7 @@ describe("middleware", () => {
       },
     ];
 
-    const middlewareFn = middleware(config);
+    const middleware = createMiddleware(config);
 
     for (const test of tests) {
       // given
@@ -113,7 +113,7 @@ describe("middleware", () => {
       const res = mockRes();
 
       // when
-      middlewareFn(req, res, mockNext);
+      middleware(req, res, mockNext);
 
       // then
       expect(res.writeHead).toHaveBeenCalledWith(200, expectedHeaders(test.size, test.type));
@@ -126,12 +126,12 @@ describe("middleware", () => {
   it("returns a 404 if the resolved path cannot be opened", () => {
     // given
     mockStatSync.mockReturnValue(undefined);
-    const middlewareFn = middleware(mockConfig);
+    const middleware = createMiddleware(mockConfig);
     const req = mockReq();
     const res = mockRes();
 
     // when
-    middlewareFn(req, res, mockNext);
+    middleware(req, res, mockNext);
 
     // then
     expectNotFound(res);
@@ -140,51 +140,51 @@ describe("middleware", () => {
   it("returns a 404 if the resolved path does not point to a file", () => {
     // given
     mockStatSync.mockReturnValue({ isFile: () => false } as Stats);
-    const middlewareFn = middleware(mockConfig);
+    const middleware = createMiddleware(mockConfig);
     const req = mockReq();
     const res = mockRes();
 
     // when
-    middlewareFn(req, res, mockNext);
+    middleware(req, res, mockNext);
 
     // then
     expectNotFound(res);
   });
 
   it("yields if the url is undefined", () => {
     // given
-    const middlewareFn = middleware(mockConfig);
+    const middleware = createMiddleware(mockConfig);
     const req = mockReq({ url: undefined });
     const res = mockRes();
 
     // when
-    middlewareFn(req, res, mockNext);
+    middleware(req, res, mockNext);
 
     // then
     expectYield(res);
   });
 
   it("yields if the config is empty", () => {
     // given
-    const middlewareFn = middleware([]);
+    const middleware = createMiddleware([]);
     const req = mockReq();
     const res = mockRes();
 
     // when
-    middlewareFn(req, res, mockNext);
+    middleware(req, res, mockNext);
 
     // then
     expectYield(res);
   });
 
   it("yields if none of the config patterns match", () => {
     // given
-    const middlewareFn = middleware(mockConfig);
+    const middleware = createMiddleware(mockConfig);
     const req = mockReq({ url: "/index.html" });
     const res = mockRes();
 
     // when
-    middlewareFn(req, res, mockNext);
+    middleware(req, res, mockNext);
 
     // then
     expectYield(res);

lib/index.ts

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

lib/middleware.ts

@@ -1,11 +1,12 @@
+import corsMiddleware from "cors";
 import fs from "fs";
 import { contentType } from "mime-types";
 import path from "path";
-import { Connect } from "vite";
+import { CommonServerOptions, Connect, PreviewServer, ViteDevServer } from "vite";
 
 import { Config } from "./config.ts";
 
-const middleware = (config: Config): Connect.NextHandleFunction => {
+export function createMiddleware(config: Config): Connect.NextHandleFunction {
   return (req, res, next) => {
     if (!req.url) {
       return next();
@@ -39,6 +40,20 @@ const middleware = (config: Config): Connect.NextHandleFunction => {
 
     return next();
   };
-};
-
-export default middleware;
+}
+
+export default function applyMiddleware(
+  server: ViteDevServer | PreviewServer,
+  pluginConfig: Config,
+  corsConfig: CommonServerOptions["cors"],
+) {
+  const pluginMiddleware = createMiddleware(pluginConfig);
+
+  // 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;
+    server.middlewares.use(corsMiddleware(config));
+  }
+
+  server.middlewares.use(pluginMiddleware);
+}

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",