From beed20be4a4dd01a52cff49887420b6a8b92b1a9 Mon Sep 17 00:00:00 2001
From: Chris Swithinbank <swithinbank@gmail.com>
Date: Wed, 17 Aug 2022 20:07:14 +0200
Subject: [PATCH] Provide correct MIME type for dynamic endpoint routes in dev
 (#4356)

---
 .changeset/six-jars-push.md                   |  5 +++++
 .../src/vite-plugin-astro-server/index.ts     |  6 +++++-
 packages/astro/test/dev-routing.test.js       | 20 +++++++++++++++++++
 .../src/pages/images/[image].svg.ts           | 14 +++++++++++++
 .../src/pages/images/static.svg.ts            |  7 +++++++
 5 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/six-jars-push.md
 create mode 100644 packages/astro/test/fixtures/with-endpoint-routes/src/pages/images/[image].svg.ts
 create mode 100644 packages/astro/test/fixtures/with-endpoint-routes/src/pages/images/static.svg.ts

diff --git a/.changeset/six-jars-push.md b/.changeset/six-jars-push.md
new file mode 100644
index 000000000000..3f353faf2c6c
--- /dev/null
+++ b/.changeset/six-jars-push.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Provide correct MIME type for dynamic endpoint routes in dev
diff --git a/packages/astro/src/vite-plugin-astro-server/index.ts b/packages/astro/src/vite-plugin-astro-server/index.ts
index 6cde51b4e147..4b8b9dd880a2 100644
--- a/packages/astro/src/vite-plugin-astro-server/index.ts
+++ b/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;
 				}
diff --git a/packages/astro/test/dev-routing.test.js b/packages/astro/test/dev-routing.test.js
index 13ea4d12fe4b..4a892349e6fa 100644
--- a/packages/astro/test/dev-routing.test.js
+++ b/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', () => {
diff --git a/packages/astro/test/fixtures/with-endpoint-routes/src/pages/images/[image].svg.ts b/packages/astro/test/fixtures/with-endpoint-routes/src/pages/images/[image].svg.ts
new file mode 100644
index 000000000000..e728394f4c95
--- /dev/null
+++ b/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>`
+	};
+}
diff --git a/packages/astro/test/fixtures/with-endpoint-routes/src/pages/images/static.svg.ts b/packages/astro/test/fixtures/with-endpoint-routes/src/pages/images/static.svg.ts
new file mode 100644
index 000000000000..727a0eae8fb2
--- /dev/null
+++ b/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>`
+	};
+}