diff --git a/.changeset/six-pumpkins-act.md b/.changeset/six-pumpkins-act.md new file mode 100644 index 0000000000..9221af960c --- /dev/null +++ b/.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` diff --git a/packages/astro/e2e/fixtures/server-islands/src/components/MediaTypeInHeader.astro b/packages/astro/e2e/fixtures/server-islands/src/components/MediaTypeInHeader.astro new file mode 100644 index 0000000000..179b97723d --- /dev/null +++ b/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'); +--- + +

I'm an island with a different content-type response header

diff --git a/packages/astro/e2e/fixtures/server-islands/src/pages/index.astro b/packages/astro/e2e/fixtures/server-islands/src/pages/index.astro index 3caf452bc0..f15cc53449 100644 --- a/packages/astro/e2e/fixtures/server-islands/src/pages/index.astro +++ b/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; + +
diff --git a/packages/astro/e2e/server-islands.test.js b/packages/astro/e2e/server-islands.test.js index 24ac7b9184..a877212bc0 100644 --- a/packages/astro/e2e/server-islands.test.js +++ b/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'); diff --git a/packages/astro/src/runtime/server/render/server-islands.ts b/packages/astro/src/runtime/server/render/server-islands.ts index 97bf1d3314..7059218287 100644 --- a/packages/astro/src/runtime/server/render/server-islands.ts +++ b/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!