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
Comments
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. |
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. |
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 The error here. Nothing in response tab: The // ...
if (body) config.body = isFormData ? body : JSON.stringify(body)
return fetch(endpoint, config).then(async (response) => {
// request.ts:24 ^^^^^^^^
let data
// ... |
Hi, @somewonderfulguy. I looked into this issue and discovered the root cause for this behavior. Root causeHere, you are setting the const version = 'v1';
export const baseUrl = `http://localhost/api/${version}`; The base is
Moreover, since the base URL is invalid, you are fetching a resource that doesn't exist. How to fix thisFirst, define the correct Once you do, you will discover the 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'
});
}; |
Prerequisites
Environment check
msw
versionBrowsers
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:
Then, switching to 2.2.2:
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.
The text was updated successfully, but these errors were encountered: