Fix server island script breaking when charset is added to content-ty…

…pe (#12810)

.changeset/six-pumpkins-act.md

@@ -0,0 +1,7 @@
+---
+'astro': patch
+---
+
+Fixes server islands failing to check content-type header under certain circumstances
+
+Sometimes a reverse proxy or similar service might modify the content-type header to include the charset or other parameters in the media type of the response. This previously wasn't handled by the client-side server island script and thus removed the script without actually placing the requested content in the DOM. This fix makes it so the script checks if the header starts with the proper content type instead of exactly matching `text/html`, so the following will still be considered a valid header: `text/html; charset=utf-8`

packages/astro/e2e/fixtures/server-islands/src/components/MediaTypeInHeader.astro

@@ -0,0 +1,5 @@
+---
+Astro.response.headers.set('content-type', 'text/html;charset=utf-8');
+---
+
+<h2 id="charset-in-content-type">I'm an island with a different content-type response header</h2>

packages/astro/e2e/fixtures/server-islands/src/pages/index.astro

@@ -3,6 +3,7 @@ import Island from '../components/Island.astro';
 import Self from '../components/Self.astro';
 import HTMLError from '../components/HTMLError.astro';
 import { generateLongText } from '../lorem';
+import MediaTypeInHeader from '../components/MediaTypeInHeader.astro';
 
 const content = generateLongText(5);
 
@@ -22,6 +23,8 @@ export const prerender = false;
 
 		<Self server:defer />
 
+		<MediaTypeInHeader server:defer />
+
 		<div id="big">
 			<Island server:defer secret="test" content={content} />
 		</div>

packages/astro/e2e/server-islands.test.js

@@ -44,6 +44,15 @@ test.describe('Server islands', () => {
 			await expect(el).toHaveText('test');
 		});
 
+		test("content-type header with media type still allows the island to be displayed", async ({
+			page,
+			astro,
+		}) => {
+			await page.goto(astro.resolveUrl('/base/'));
+			let el = page.locator('#charset-in-content-type');
+			await expect(el).toHaveCount(1);
+		});
+
 		test('Self imported module can server defer', async ({ page, astro }) => {
 			await page.goto(astro.resolveUrl('/base/'));
 			let el = page.locator('.now');

packages/astro/src/runtime/server/render/server-islands.ts

@@ -120,7 +120,10 @@ let response = await fetch('${serverIslandUrl}', {
 `
 }
 if (script) {
-	if(response.status === 200 && response.headers.get('content-type') === 'text/html') {
+	if(
+		response.status === 200 
+		&& response.headers.has('content-type') 
+		&& response.headers.get('content-type').split(";")[0].trim() === 'text/html') {
 		let html = await response.text();
 	
 		// Swap!