Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix server island script breaking when charset is added to content-type #12810

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/six-pumpkins-act.md
Original file line number Diff line number Diff line change
@@ -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`
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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>
Expand Down
9 changes: 9 additions & 0 deletions packages/astro/e2e/server-islands.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
5 changes: 4 additions & 1 deletion packages/astro/src/runtime/server/render/server-islands.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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!
Expand Down
Loading