From 43255d96f37ea6917edbc528f650c927a2974348 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Sat, 7 Dec 2024 20:23:30 +0100 Subject: [PATCH] Pass corsProxyUrl to TCPOverFetchWebsocket fro bootSiteClient --- .../web/src/lib/tcp-over-fetch-websocket.ts | 44 ++++++++++++------- .../blueprints/src/lib/resources.ts | 2 +- packages/playground/client/src/index.ts | 1 + .../remote/src/lib/worker-thread.ts | 3 ++ packages/playground/website/vite.config.ts | 4 +- .../vite-extensions/vite-cors-proxy-url.ts | 12 ----- 6 files changed, 34 insertions(+), 32 deletions(-) delete mode 100644 packages/vite-extensions/vite-cors-proxy-url.ts diff --git a/packages/php-wasm/web/src/lib/tcp-over-fetch-websocket.ts b/packages/php-wasm/web/src/lib/tcp-over-fetch-websocket.ts index a591d9a777..ddc8fd926c 100644 --- a/packages/php-wasm/web/src/lib/tcp-over-fetch-websocket.ts +++ b/packages/php-wasm/web/src/lib/tcp-over-fetch-websocket.ts @@ -38,16 +38,14 @@ * From there, the plaintext data is treated by the same HTTP<->fetch() machinery as * described in the previous paragraph. */ -// @ts-ignore -// import { corsProxyUrl } from 'virtual:cors-proxy-url'; import { TLS_1_2_Connection } from './tls/1_2/connection'; import { generateCertificate, GeneratedCertificate } from './tls/certificates'; import { concatUint8Arrays } from './tls/utils'; import { ContentTypes } from './tls/1_2/types'; -const corsProxyUrl = 'http://127.0.0.1:5263/cors-proxy.php'; export type TCPOverFetchOptions = { CAroot: GeneratedCertificate; + corsProxyUrl?: string; }; /** @@ -70,6 +68,7 @@ export const tcpOverFetchWebsocket = (tcpOptions: TCPOverFetchOptions) => { constructor(url: string, wsOptions: string[]) { super(url, wsOptions, { CAroot: tcpOptions.CAroot, + corsProxyUrl: tcpOptions.corsProxyUrl, }); } }; @@ -88,6 +87,7 @@ export interface TCPOverFetchWebsocketOptions { * clientDownstream stream and tracking the closure of that stream. */ outputType?: 'messages' | 'stream'; + corsProxyUrl?: string; } export class TCPOverFetchWebsocket { @@ -104,6 +104,7 @@ export class TCPOverFetchWebsocket { port = 0; listeners = new Map(); CAroot?: GeneratedCertificate; + corsProxyUrl?: string; clientUpstream = new TransformStream(); clientUpstreamWriter = this.clientUpstream.writable.getWriter(); @@ -114,13 +115,18 @@ export class TCPOverFetchWebsocket { constructor( public url: string, public options: string[], - { CAroot, outputType = 'messages' }: TCPOverFetchWebsocketOptions = {} + { + CAroot, + corsProxyUrl, + outputType = 'messages', + }: TCPOverFetchWebsocketOptions = {} ) { const wsUrl = new URL(url); this.host = wsUrl.searchParams.get('host')!; this.port = parseInt(wsUrl.searchParams.get('port')!, 10); this.binaryType = 'arraybuffer'; + this.corsProxyUrl = corsProxyUrl; this.CAroot = CAroot; if (outputType === 'messages') { this.clientDownstream.readable @@ -310,9 +316,10 @@ export class TCPOverFetchWebsocket { 'https' ); try { - await RawBytesFetch.fetchRawResponseBytes(request).pipeTo( - tlsConnection.serverEnd.downstream.writable - ); + await RawBytesFetch.fetchRawResponseBytes( + request, + this.corsProxyUrl + ).pipeTo(tlsConnection.serverEnd.downstream.writable); } catch (e) { // Ignore errors from fetch() // They are handled in the constructor @@ -330,9 +337,10 @@ export class TCPOverFetchWebsocket { 'http' ); try { - await RawBytesFetch.fetchRawResponseBytes(request).pipeTo( - this.clientDownstream.writable - ); + await RawBytesFetch.fetchRawResponseBytes( + request, + this.corsProxyUrl + ).pipeTo(this.clientDownstream.writable); } catch (e) { // Ignore errors from fetch() // They are handled in the constructor @@ -412,12 +420,14 @@ class RawBytesFetch { /** * Streams a HTTP response including the status line and headers. */ - static fetchRawResponseBytes(request: Request) { - const requestClone = new Request( - // @TOOD: somehow handle the CORS proxy logic in the client, not - `${corsProxyUrl}?${request.url}`, - request - ); + static fetchRawResponseBytes(request: Request, corsProxyUrl?: string) { + const targetRequest = corsProxyUrl + ? new Request( + // @TOOD: somehow handle the CORS proxy logic in the client, not + `${corsProxyUrl}${request.url}`, + request + ) + : request; // This initially used a TransformStream and piped the response // body to the writable side of the TransformStream. @@ -428,7 +438,7 @@ class RawBytesFetch { async start(controller) { let response: Response; try { - response = await fetch(requestClone); + response = await fetch(targetRequest); } catch (error) { /** * Pretend we've got a 400 Bad Request response whenever diff --git a/packages/playground/blueprints/src/lib/resources.ts b/packages/playground/blueprints/src/lib/resources.ts index e9524aa21a..377dc7127f 100644 --- a/packages/playground/blueprints/src/lib/resources.ts +++ b/packages/playground/blueprints/src/lib/resources.ts @@ -459,7 +459,7 @@ export class GitDirectoryResource extends Resource { async resolve() { const repoUrl = this.options?.corsProxy - ? `${this.options.corsProxy}?${this.reference.url}` + ? `${this.options.corsProxy}${this.reference.url}` : this.reference.url; const ref = ['', 'HEAD'].includes(this.reference.ref) ? 'HEAD' diff --git a/packages/playground/client/src/index.ts b/packages/playground/client/src/index.ts index a23fd279a9..8741bb7db9 100644 --- a/packages/playground/client/src/index.ts +++ b/packages/playground/client/src/index.ts @@ -152,6 +152,7 @@ export async function startPlaygroundWeb({ phpVersion: compiled.versions.php, wpVersion: compiled.versions.wp, withNetworking: compiled.features.networking, + corsProxyUrl: corsProxy, }); await playground.isReady(); downloadPHPandWP.finish(); diff --git a/packages/playground/remote/src/lib/worker-thread.ts b/packages/playground/remote/src/lib/worker-thread.ts index 8bdddd346e..8969854d9d 100644 --- a/packages/playground/remote/src/lib/worker-thread.ts +++ b/packages/playground/remote/src/lib/worker-thread.ts @@ -75,6 +75,7 @@ export type WorkerBootOptions = { withNetworking: boolean; mounts?: Array; shouldInstallWordPress?: boolean; + corsProxyUrl?: string; }; /** @inheritDoc PHPClient */ @@ -168,6 +169,7 @@ export class PlaygroundWorkerEndpoint extends PHPWorker { sapiName = 'cli', withNetworking = false, shouldInstallWordPress = true, + corsProxyUrl, }: WorkerBootOptions) { if (this.booted) { throw new Error('Playground already booted'); @@ -262,6 +264,7 @@ export class PlaygroundWorkerEndpoint extends PHPWorker { }); tcpOverFetch = { CAroot, + corsProxyUrl, }; } else { phpIniEntries['allow_url_fopen'] = '0'; diff --git a/packages/playground/website/vite.config.ts b/packages/playground/website/vite.config.ts index 70c7861ac7..041dd058b5 100644 --- a/packages/playground/website/vite.config.ts +++ b/packages/playground/website/vite.config.ts @@ -83,8 +83,8 @@ export default defineConfig(({ command, mode }) => { content: ` export const corsProxyUrl = '${ mode === 'production' - ? '/cors-proxy.php' - : 'http://127.0.0.1:5263/cors-proxy.php' + ? '/cors-proxy.php?' + : 'http://127.0.0.1:5263/cors-proxy.php?' }';`, }), // GitHub OAuth flow diff --git a/packages/vite-extensions/vite-cors-proxy-url.ts b/packages/vite-extensions/vite-cors-proxy-url.ts deleted file mode 100644 index c5c522d303..0000000000 --- a/packages/vite-extensions/vite-cors-proxy-url.ts +++ /dev/null @@ -1,12 +0,0 @@ -import virtualModule from './vite-virtual-module'; - -export const corsProxyUrlPlugin = (mode: string) => - virtualModule({ - name: 'cors-proxy-url', - content: ` - export const corsProxyUrl = '${ - mode === 'production' - ? '/cors-proxy.php' - : 'http://127.0.0.1:5263/cors-proxy.php' - }';`, - });