| 541 | 544 | | const viteDevServer = await createViteDevServer(viteConfig); |
| 542 | 545 | | viteCreateSpan.end(); |
| 543 | 546 | | |
| 547 | + | // Inject a Connect-level CORS middleware at the very front of the stack so |
| 548 | + | // that Vite-handled requests (module transforms, static assets, HMR) also |
| 549 | + | // receive proper CORS headers. The react-server CORS middleware in the |
| 550 | + | // composed handler chain only covers requests that reach the SSR handler, |
| 551 | + | // but Vite's internal middlewares respond earlier and would otherwise send |
| 552 | + | // responses without any Access-Control-* headers. |
| 553 | + | if (corsEnabled) { |
| 554 | + | const _serverCors = serverCors || {}; |
| 555 | + | const _originFn = |
| 556 | + | typeof _serverCors.origin === "function" ? _serverCors.origin : null; |
| 557 | + | const _staticOrigin = _originFn ? null : (_serverCors.origin ?? "*"); |
| 558 | + | const _credentials = _serverCors.credentials ?? false; |
| 559 | + | |
| 560 | + | // unshift onto Connect's stack so this runs before all Vite-internal |
| 561 | + | // middlewares (which are already registered by createViteDevServer). |
| 562 | + | viteDevServer.middlewares.stack.unshift({ |
| 563 | + | route: "", |
| 564 | + | handle: function viteCorsShim(req, res, next) { |
| 565 | + | const requestOrigin = req.headers.origin; |
| 566 | + | if (!requestOrigin) return next(); |
| 567 | + | |
| 568 | + | let allowed; |
| 569 | + | if (_originFn) { |
| 570 | + | // The origin function expects a context-like object; build a minimal |
| 571 | + | // shim that matches what the react-server CORS middleware receives. |
| 572 | + | allowed = _originFn({ |
| 573 | + | request: { |
| 574 | + | headers: { |
| 575 | + | get: (name) => req.headers[name.toLowerCase()], |
| 576 | + | }, |
| 577 | + | }, |
| 578 | + | }); |
| 579 | + | } else { |
| 580 | + | allowed = _staticOrigin === true ? requestOrigin : _staticOrigin; |
| 581 | + | } |
| 582 | + | |
| 583 | + | // allowed may be a promise when using the default dynamic origin |
| 584 | + | Promise.resolve(allowed).then((origin) => { |
| 585 | + | const effectiveOrigin = |
| 586 | + | origin === true ? requestOrigin : origin || requestOrigin; |
| 587 | + | res.setHeader("access-control-allow-origin", effectiveOrigin); |
| 588 | + | if (_credentials) { |
| 589 | + | res.setHeader("access-control-allow-credentials", "true"); |
| 590 | + | } |
| 591 | + | if (req.method === "OPTIONS") { |
| 592 | + | res.setHeader( |
| 593 | + | "access-control-allow-methods", |
| 594 | + | _serverCors.allowMethods || "GET,HEAD,PUT,PATCH,POST,DELETE" |
| 595 | + | ); |
| 596 | + | const allowHeaders = |
| 597 | + | _serverCors.allowHeaders || |
| 598 | + | req.headers["access-control-request-headers"]; |
| 599 | + | if (allowHeaders) { |
| 600 | + | res.setHeader("access-control-allow-headers", allowHeaders); |
| 601 | + | } |
| 602 | + | if (_serverCors.maxAge) { |
| 603 | + | res.setHeader( |
| 604 | + | "access-control-max-age", |
| 605 | + | String(_serverCors.maxAge) |
| 606 | + | ); |
| 607 | + | } |
| 608 | + | res.statusCode = 204; |
| 609 | + | res.end(); |
| 610 | + | return; |
| 611 | + | } |
| 612 | + | next(); |
| 613 | + | }); |
| 614 | + | }, |
| 615 | + | }); |
| 616 | + | } |
| 617 | + | |
| 544 | 618 | | if (config.envDir !== false) { |
| 545 | 619 | | if (globalThis.__react_server_prev_env_keys__) { |
| 546 | 620 | | for (const key of globalThis.__react_server_prev_env_keys__) { |