Provide correct MIME type for dynamic endpoint routes in dev (#4356)

.changeset/six-jars-push.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Provide correct MIME type for dynamic endpoint routes in dev

packages/astro/src/vite-plugin-astro-server/index.ts

@@ -345,7 +345,11 @@ async function handleRequest(
 				await writeWebResponse(res, result.response);
 			} else {
 				let contentType = 'text/plain';
-				const computedMimeType = route.pathname ? mime.getType(route.pathname) : null;
+				// Dynamic routes don’t include `route.pathname`, so synthesise a path for these (e.g. 'src/pages/[slug].svg')
+				const filepath =
+					route.pathname ||
+					route.segments.map((segment) => segment.map((p) => p.content).join('')).join('/');
+				const computedMimeType = mime.getType(filepath);
 				if (computedMimeType) {
 					contentType = computedMimeType;
 				}

packages/astro/test/dev-routing.test.js

@@ -246,6 +246,26 @@ describe('Development Routing', () => {
 			expect(body.slug).to.equal('thing4');
 			expect(body.title).to.equal('data [slug]');
 		});
+
+		it('correct MIME type when loading /home.json (static route)', async () => {
+			const response = await fixture.fetch('/home.json');
+			expect(response.headers.get('content-type')).to.match(/application\/json/);
+		});
+
+		it('correct MIME type when loading /thing1.json (dynamic route)', async () => {
+			const response = await fixture.fetch('/thing1.json');
+			expect(response.headers.get('content-type')).to.match(/application\/json/);
+		});
+
+		it('correct MIME type when loading /images/static.svg (static image)', async () => {
+			const response = await fixture.fetch('/images/static.svg');
+			expect(response.headers.get('content-type')).to.match(/image\/svg\+xml/);
+		});
+
+		it('correct MIME type when loading /images/1.svg (dynamic image)', async () => {
+			const response = await fixture.fetch('/images/1.svg');
+			expect(response.headers.get('content-type')).to.match(/image\/svg\+xml/);
+		});
 	});
 
 	describe('file format routing', () => {

packages/astro/test/fixtures/with-endpoint-routes/src/pages/images/[image].svg.ts

@@ -0,0 +1,14 @@
+export async function getStaticPaths() {
+	return [
+			{ params: { image: 1 } },
+			{ params: { image: 2 } },
+	];
+}
+
+export async function get({ params }) {
+	return {
+			body: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
+	<title>${params.image}</title>
+</svg>`
+	};
+}

packages/astro/test/fixtures/with-endpoint-routes/src/pages/images/static.svg.ts

@@ -0,0 +1,7 @@
+export async function get() {
+	return {
+			body: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
+	<title>Static SVG</title>
+</svg>`
+	};
+}