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

v2.2.2 does not intercept request in browser mode (CORS error) but v1.3.1 does #2067

Closed
4 tasks done
somewonderfulguy opened this issue Mar 5, 2024 · 4 comments
Closed
4 tasks done
Labels
bug Something isn't working scope:browser Related to MSW running in a browser wontfix This will not be worked on

Comments

@somewonderfulguy
Copy link

somewonderfulguy commented Mar 5, 2024

Prerequisites

Environment check

  • I'm using the latest msw version
  • I'm using Node.js version 18 or higher

Browsers

Chromium (Chrome, Brave, etc.), Firefox

Reproduction repository

https://github.com/somewonderfulguy/timeline

Node.js version

20.11.1

Reproduction steps

To reproduce the issue you need to clone minimal project with only one request.

This will clone & launch the app using MSW 1.3.1 there, you'll see that everything works as expected:

git clone https://github.com/somewonderfulguy/timeline.git
cd ./timeline
pnpm i
pnpm dev-offline

Then, switching to 2.2.2:

git checkout msw-v2
pnpm i
pnpm dev-offline

The request is not going to pass now. It will have strict-origin-when-cross-origin error.

Last week I added MSW to CRA project (MSW was 2.2.1) and worked fine to me. Today, I decided to bootstrap new project using Vite and it doesn't work. Downgrading to 2.2.1 doesn't help, downgrading to 1.3.1 does.

Current behavior

Vite@5 and MSW@2 do not mix - CORS error happens.

Expected behavior

MSW 2 requests interception should work with Vite.


UPDATE: As I continue to investigate, it seems like Vite is not an issue. I checked CRA and see there's the same error actually. It worked for me because the real endpoint exists. However if you try to intercept completely made up URL, then the issue happens.

@somewonderfulguy somewonderfulguy added bug Something isn't working needs:triage Issues that have not been investigated yet. scope:browser Related to MSW running in a browser labels Mar 5, 2024
@somewonderfulguy
Copy link
Author

I do hope I haven't spammed a duplicate. However, I couldn't find similar issue and the only fix that worked to me is to do a major downgrade.

@somewonderfulguy somewonderfulguy changed the title v2.2.2 does not intercept request in browser mode (Vite 5.1.4) but v1.3.1 does v2.2.2 does not intercept request in browser mode (CORS error) but v1.3.1 does Mar 5, 2024
@kettanaito
Copy link
Member

Hi, @somewonderfulguy. Thanks for reporting this.

Can you please include the actual CORS error too?

Note that you are comparing versions of MSW that are about a year apart (1.3 and 2.x). I'm not aware of any issues in MSW that would cause a CORS error, unless you are indeed violating the CORS policy (that indicates an invalid request). That's why I'm curious to see the error message.

@somewonderfulguy
Copy link
Author

somewonderfulguy commented Mar 8, 2024

Hi, @kettanaito!

I don't suppose I have an invalid request. Not sure. I mean, absolutely the same request is intercepted in v1.3 without CORS. Change the version - you'll get error.

I forgot to mention that in the repository I left in issue description there's a branch msw-v2. And the master branch has v1.3. So it is possible to try both branches. They are absolutely identical but the msw version and, of course, msw syntax and different mockServiceWorker.js in public directory.

The error here. Nothing in response tab:
image

The request.ts:24 stands for:

// ...
if (body) config.body = isFormData ? body : JSON.stringify(body)

return fetch(endpoint, config).then(async (response) => {
// request.ts:24 ^^^^^^^^
  let data
// ...

@kettanaito
Copy link
Member

Hi, @somewonderfulguy. I looked into this issue and discovered the root cause for this behavior.

Root cause

Here, you are setting the baseUrl incorrectly:

const version = 'v1';
export const baseUrl = `http://localhost/api/${version}`;

The base is http://localhost while your app is running at http://localhost:5173. That means that the request will be cross-origin, and by default, it will be aborted. That's precisely what happens:

GET http://localhost/api/v1/editorData net::ERR_CONNECTION_REFUSED

Moreover, since the base URL is invalid, you are fetching a resource that doesn't exist.

How to fix this

First, define the correct baseUrl. I recommend using the URL constructor and document.baseURI as the base URL.

Once you do, you will discover the /api/v1/editorData returning 304 with the page's HTML instead of the mock data. That's because you aren't awaiting the worker.start() Promise.

Here's a complete diff you can apply to fix your problem:

index e283784..39220cf 100644
--- a/src/api/baseUrl.ts
+++ b/src/api/baseUrl.ts
@@ -1,2 +1,2 @@
 const version = 'v1';
-export const baseUrl = `http://localhost/api/${version}`;
+export const baseUrl = new URL(`/api/${version}`, document.baseURI);
diff --git a/src/main.tsx b/src/main.tsx
index 9469f4a..8da9ea2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -17,7 +17,7 @@ const launchOffline = async () => {

   await import('../public/mockServiceWorker.js?worker');

-  importResult.worker.start({
+  await importResult.worker.start({
     onUnhandledRequest: 'bypass'
   });
 };

@kettanaito kettanaito added wontfix This will not be worked on and removed needs:triage Issues that have not been investigated yet. labels May 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working scope:browser Related to MSW running in a browser wontfix This will not be worked on
Projects
None yet
Development

No branches or pull requests

2 participants