Fix Safari failing to make cross-origin HTTP requests by ashfame · Pull Request #3440 · WordPress/wordpress-playground

ashfame · 2026-03-28T04:31:40Z

Motivation for the change, related issues

Problem:
In Safari, WordPress beta tester plugin fails to offer the correct updates that are available after updating the channels to Beta/RCs in its settings. This happen because, the request to api.wordpress.org doesn't go through.

Root cause:
Safari does not support ReadableStream as a fetch() request body, throwing "NotSupportedError: ReadableStream uploading is not supported". fetchWithCorsProxy used ReadableStream.tee() to duplicate the body for the direct-fetch + CORS-proxy-fallback pattern, which broke all POST requests (e.g. wp_version_check to api.wordpress.org) in Safari.

Implementation details

For browsers that support it, keep the original streaming teeRequest() direct-fetch + CORS-proxy-fallback flow. For Safari (no ReadableStream upload support), buffer the request body into an ArrayBuffer so it can be reused for both the direct fetch attempt and the proxy retry.

The issue is confirmed to fix with this PR, but the issue only surfaces locally when ran like the following:

npx nx build playground-website
cd dist/packages/playground/wasm-wordpress-net
php -S 127.0.0.1:7777 -t .

The issue doesn't surface when running npm run dev, not sure why.

Testing Instructions (or ideally a Blueprint)

Checkout this branch locally & run with:

npx nx build playground-website
cd dist/packages/playground/wasm-wordpress-net
php -S 127.0.0.1:7777 -t .

Open http://localhost:7777/?plugin=wordpress-beta-tester in Safari browser.
Go to Dashboard > Updates, only Nightly is offered.
Go to Tools > Beta Testing
Select Bleeding-edge and then Beta/RC, save.
Now go to Dashboard > Updates, 7.0-RC2 will be offered for upgrade.

adamziel · 2026-03-28T09:00:44Z

Let's still use the body stream when supported, no need to make it worse for other browsers.

adamziel · 2026-03-28T09:02:34Z

Alternatively, we could try to emulate stream support using XHR. This matters when uploading big files.

brandonpayton · 2026-03-28T17:26:03Z

packages/php-wasm/web-service-worker/src/fetch-with-cors-proxy.ts

+	 * attempt and the CORS proxy fallback. We buffer into an ArrayBuffer
+	 * instead of using ReadableStream.tee() because Safari does not support
+	 * ReadableStream as a fetch() request body ("ReadableStream uploading
+	 * is not supported").


Fortunately, it looks like "ReadableStream request bodies" are part the WebKit Interop 2026 plans:
https://webkit.org/blog/17818/announcing-interop-2026/#fetch-uploads-and-ranges

ReadableStream request bodies enable true streaming uploads, letting you upload large files or real-time data without loading everything into memory first:

Safari does not support ReadableStream as a fetch() request body, throwing "NotSupportedError: ReadableStream uploading is not supported". fetchWithCorsProxy used ReadableStream.tee() to duplicate the body for the direct-fetch + CORS-proxy-fallback pattern, which broke all POST requests (e.g. wp_version_check to api.wordpress.org) in Safari. Buffer the request body into an ArrayBuffer instead so it can be reused for both fetch attempts. Made-with: Cursor

…pport Instead of unconditionally buffering the request body into an ArrayBuffer for all browsers, detect at runtime whether the browser supports ReadableStream as a fetch() request body. Use the streaming teeRequest() approach when supported (Chrome, Firefox) and fall back to ArrayBuffer buffering only when not (Safari). Addresses review feedback to avoid degrading streaming performance for browsers that already support it. Made-with: Cursor

Add a beforeAll hook that triggers the one-time ReadableStream body support detection before any per-test fetch mocks are installed, so the detection's internal fetch() call doesn't consume mock responses. Made-with: Cursor

Copilot

Pull request overview

This PR addresses Safari failures for cross-origin POST requests by avoiding ReadableStream request bodies when unsupported, enabling the direct-fetch + CORS-proxy-fallback flow to work in Safari.

Changes:

Add runtime feature detection for ReadableStream as a fetch() request body and cache the result.
For non-supporting browsers, buffer the request body into an ArrayBuffer to reuse it across direct fetch and proxy retry.
Update tests to “pre-warm” the feature detection cache to avoid consuming per-test mocked fetch responses.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
packages/php-wasm/web-service-worker/src/fetch-with-cors-proxy.ts	Adds `ReadableStream` upload support detection and an `ArrayBuffer` buffering fallback for Safari before retrying via CORS proxy.
packages/php-wasm/web-service-worker/src/fetch-with-cors-proxy.spec.ts	Adds suite-level warmup to keep feature detection from interfering with per-test `fetch` mocks.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/php-wasm/web-service-worker/src/fetch-with-cors-proxy.ts

packages/php-wasm/web-service-worker/src/fetch-with-cors-proxy.spec.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

After teeRequest/buffering, requestObject's body stream may be locked. Defensively use directRequest (which carries identical metadata) in the catch block to avoid relying on the original request's body state. Made-with: Cursor

Export a test-only resetStreamBodySupportedForTesting() function so the cached feature detection can be cleared between test runs. Add three tests that force the non-streaming path by rejecting the detection probe, covering buffered POST bodies for both the direct fetch and CORS proxy fallback, as well as bodyless GET requests. Made-with: Cursor

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/php-wasm/web-service-worker/src/fetch-with-cors-proxy.ts

Reduces public API surface by grouping test utilities under a clearly internal __testing export object. Made-with: Cursor

brandonpayton · 2026-03-31T23:34:43Z

packages/php-wasm/web-service-worker/src/fetch-with-cors-proxy.ts

+				controller.close();
+			},
+		});
+		await fetch('data:a/a,', {


Is there a reason we need to use a meaningless MIME type here? If so, let's note why in a comment. If not, maybe we can remove the type altogether. The data URL spec says it is totally optional, and fetch('data:,') works fine in Firefox, Chrome, and Safari for me.

You are right. I didn't realise mime type was optional. Good to know. Tested 👍

brandonpayton · 2026-03-31T23:48:10Z

packages/php-wasm/web-service-worker/src/fetch-with-cors-proxy.ts

+		 * fetch attempt and the CORS proxy fallback. Safari does not
+		 * support ReadableStream as a fetch() request body
+		 * ("ReadableStream uploading is not supported").


Wherever we note this, let's:

prefix the comment about Safari with a date

clarify to "does not currently support"

mention that Safari support is in the works for Interop 2026

include a reference link: https://web.dev/blog/interop-2026#fetch_uploads_and_ranges

This way we can feel comfortable removing the workaround when it is no longer needed.

brandonpayton · 2026-03-31T23:59:48Z

packages/php-wasm/web-service-worker/src/fetch-with-cors-proxy.ts

+		const [teedDirect, teedProxy] = await teeRequest(requestObject);
+		directRequest = teedDirect;
+		corsProxyBody = teedProxy.body;
+	} else {


Is there a reason we shouldn't move this if/else into the teeRequest() utility?

If we solve this problem in the utility function, it will be solved wherever teeRequest() is used. teeRequest() is not currently used elsewhere in this repo, but I think the workaround belongs there, unless there is a reason not to move it.

Very good point! I can refactor it in a follow up PR so that the fix is not still waiting to land. Sounds good?

brandonpayton · 2026-04-01T00:10:33Z

packages/php-wasm/web-service-worker/src/fetch-with-cors-proxy.ts

+			const rootUrl = new URL(import.meta.url);
+			rootUrl.pathname = '';
+			rootUrl.search = '';
+			rootUrl.hash = '';
+			const corsProxyUrlObj = new URL(corsProxyUrl, rootUrl.toString());


Why do we need to clear all the fields on the rootUrl? Wouldn't the URL() constructor be able to make sense of the root URL on its own?

For example, in the browser dev tools console, new URL('a', new URL('http://happycode.net/?stuff#huzzah')).href evaluates to 'http://happycode.net/a'.

I think this can be as simple as:

if ( useStreaming && body && new URL(corsProxyUrlObj, import.meta.url).protocol === 'http:' ) {

I know the rootUrl changes are pre-existing code that was moved. But I think we can either simplify while we're moving around what I think is unnecessary code, or maybe we should just leave the code alone except for adding useStreaming to the original if.

There may be something I'm missing, but that is my read here.

Yeah, seems alright to do. I have made the change.

…on works fine without it

ashfame self-assigned this Mar 28, 2026

brandonpayton reviewed Mar 28, 2026

View reviewed changes

ashfame mentioned this pull request Mar 30, 2026

Serve client on 127.0.0.1:5400/client/index.js when running npm run dev #3302

Open

brandonpayton added [Type] Bug An existing feature does not function as intended [Priority] High labels Mar 31, 2026

ashfame added 2 commits March 31, 2026 21:18

ashfame force-pushed the beta_tester_safari_prod_only branch from b427a3f to 4367a2f Compare March 31, 2026 15:33

ashfame added 2 commits March 31, 2026 22:27

Pre-warm stream body feature detection in tests

28c4044

Add a beforeAll hook that triggers the one-time ReadableStream body support detection before any per-test fetch mocks are installed, so the detection's internal fetch() call doesn't consume mock responses. Made-with: Cursor

add back code comments

0e6f502

ashfame marked this pull request as ready for review March 31, 2026 18:43

ashfame requested review from a team, Copilot and zaerl March 31, 2026 18:43

Copilot AI reviewed Mar 31, 2026

View reviewed changes

ashfame and others added 4 commits April 1, 2026 01:54

Update packages/php-wasm/web-service-worker/src/fetch-with-cors-proxy.ts

ade6477

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Merge branch 'trunk' into beta_tester_safari_prod_only

a4d807e

ashfame requested a review from Copilot March 31, 2026 20:25

Copilot AI reviewed Mar 31, 2026

View reviewed changes

Move test-only reset function under __testing namespace

d79d665

Reduces public API surface by grouping test utilities under a clearly internal __testing export object. Made-with: Cursor

ashfame requested a review from brandonpayton March 31, 2026 20:39

brandonpayton reviewed Apr 1, 2026

View reviewed changes

ashfame and others added 4 commits April 3, 2026 12:18

remove mime type from the data url since its optional and our detecti…

f6176bc

…on works fine without it

clarify safari support comment better

2499f16

simplify check

b84d8da

Merge branch 'trunk' into beta_tester_safari_prod_only

5391a96

Conversation

ashfame commented Mar 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation for the change, related issues

Implementation details

Testing Instructions (or ideally a Blueprint)

Uh oh!

adamziel commented Mar 28, 2026

Uh oh!

adamziel commented Mar 28, 2026

Uh oh!

brandonpayton Mar 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

brandonpayton Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

ashfame Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

brandonpayton Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

brandonpayton Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

ashfame Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

brandonpayton Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

ashfame Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ashfame commented Mar 28, 2026 •

edited

Loading

brandonpayton Mar 28, 2026 •

edited

Loading