Msw: SSR proxy - ERROR Protocol "http:" not supported. Expected "https:"

[hamishhossack]

Describe the bug

I'm using msw on a nuxt application (SSR), I have the mocking setup and working perfectly on the node server and in the browser. This is great when I'm going directly to the API https://api.blah.com.

However, I'm also trying to implement a proxy via my node server instead of going directly to the API.

So the browser request turns from https://api.blah.com to http://localhost:3000/api which then runs through the node server and (using axios) proxy to the API.

It's on that layer i'm looking to utilise the msw + node-request-interceptor and receiving the error.

Here are some extracts from running in DEBUG=*.

Just to note that i'm not trying to mock this endpoint yet.

 http POST http://api.blah.com:443/path using [Function: bound proxiedOriginalRequest] +0ms
 http override https.request original call +3ms

 ERROR  Protocol "http:" not supported. Expected "https:"

The request is coming in on (http) http://localhost:3000/api/ but wants to leave on (https) https://api.blah.com this happens with @nuxtjs/axios & @nuxtjs/proxy (uses http-proxy-middleware underneath) modules.

I've seen the quite recent changes to "detect the protocol from agent" and wondering if there is a way to set that protocol rather than infer it from the request.

Environment

• msw: 0.24.0
• nodejs: 14.14.0
• npm: 6.14.8

Please also provide your browser version.

To Reproduce

Steps to reproduce the behavior:

1. Setup msw on node & service worker in browser
2. (browser) Send any http request to the node server
3. (node) Proxy that http request to a https API
4. (node) See error: Protocol "http:" not supported. Expected "https:"

Edit
Here is the reproduced issue;
https://github.com/hamishhossack/msw-proxy-bug

Steps to reproduce

1. yarn dev build the app
2. visit http://localhost:3000
3. view server logs for error

Key points

• Enable proxy in axios
• Make a client request on the proxy url

Expected behavior

node-request-interceptor to not touch the protocol in node and allow it to pass via the proxied https module.

here is the working request url being mocked;
http://localhost:3000/api/guests/invites/2k3j4h234

PS. Happy to get involved with any changes required, if you can make sense of this. I'll try and make a reproducible repo in the meantime.

[marcosvega91]

Hi @hamishhossack, thanks for reaching us :). I'm going to take a look at your example

[marcosvega91]

I have looked at the code and I think that the issue is here https://github.com/mswjs/node-request-interceptor/blob/50e5aa72ee102a8bec8e2f38e3efc9efa26d5e74/src/utils/getUrlByRequestOptions.ts#L34.

If the options.uri is not defined I think that we should also check the port. If the port is 443 we should use https otherwise we will use the default protocol

[hamishhossack]

Yes certainly looks like it would resolve this use case, I will PR it on node-request-interceptor 👍🏻 Thanks :)

[kettanaito]

The fix has been published under [email protected]. Please re-install the dependencies to get it in your project.

Thank you for the awesome contribution, @hamishhossack!