TypeError: Protocol "http:" not supported. Expected "https:"TypeError [ERR_INVALID_PROTOCOL]: Protocol "http:" not supported. Expected "https:"

Describe the bug

A clear and concise description of what the bug is.

Environment

• msw: 0.19.5
• nodejs: 12.8.2
• npm: 6.14.5

Please also provide your browser version.

To Reproduce

Steps to reproduce the behavior:

rest.get('/api/users*', (req, res, ctx) => {
  return res(ctx.json(apiresponse))
})

when i write this on our source i get this error always.

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

[kettanaito]

The issue is that relative URLs do not exist in NodeJS. All requests in NodeJS must have an absolute URL (either explicit or implicit).

When you write /api/users in your request handler route, it’s always transformed into an absolute URL. When it’s running in a browser, it’s matched against the current location.origin. In NodeJS, there is no such concept as “location”. However, certain DOM-like environments (like jsdom) polyfill location and set it to a hard-coded "localhost:XXXX" string. This is the reason why a relative route may work in both in-browser development and integration tests that run in NodeJS.

Solution

You can choose one of the following ways to solve this issue:

1. Provide an absolute URL:

setupServer(
  rest.get('https://reqres.in/api/users', (req, res, ctx) => res(ctx.json({ mocked: true })
)

This approach is preferable, just make sure you request the same endpoint during development, or in a browser (if applicable). If using the same absolute request URL is constrained (for any reasons), consider having a different request URL depending on the environment. For example:

const ORIGIN = process.env.NODE_ENV === 'test'
  ? 'https://reqres.in'
  : ''

setupServer(
  rest.get(`${ORIGIN}/api/user`, (req, res, ctx) => res(ctx.json({ mocked: true })
)

You can abstract this URL origin logic into a custom function to prevent repetition.

1. Use a wildcard for the request’s URL origin:

setupServer(
  rest.get('*/api/users', (req, res, ctx) => res(ctx.json({ mocked: true })
)

This is generally not recommended, because this will match all requests that end with /api/users. For example, if your app performs a https://google.com/api/users request, that one would get matched as well.

---

I can also suggest to omit the * (asterisk) at the end of your route. Request query parameters and hash are stripped off, and never taken into account when matching requests. However, by making a permissive route like /api/users* you also match against any child route (i.e. /api/users/messages/abc-123).

[manishiitg]

Hi @kettanaito

This is how i call the actual api

fetch("https://reqres.in/api/users?page=1")

I am running mocks on nodejs.

no other setup for “setupServer” just the basic