Is there an option to use MSW as a proxy?

[loia5tqd001]

I want to have an option to proxy all requests from /api/* to https://my-api/*. Is it possible in our library? or our library only supports mocking, not proxying?

The wanted API could be an object handler like this

...handlers
{
  path: '/api/*',
  proxy: "https://my-api/*"
}

I've tried really hard to find in the docs but couldn't find any solution, whereas reading this article makes me think this's doable.

[kettanaito]

Hey, @loia5tqd001.

MSW is primarily designed for mocking. That being said, you can utilize its request capturing capabilities to capture a range of requests and proxy them to another endpoint.

import { setupWorker, rest, RESTMethods } from 'msw'

// Create a custom method to generate 
// the same request handler for all REST API methods.
function createProxy(url, resolver) {
  return Object.values(RESTMethods).map((method) => {
    return res[method](url, resolver)
  })
}

export const handlers = [
  // Capture all /api/*" requests and proxy them.
  createProxy('/api/*', (req, res, ctx) => {
    const proxy = await ctx.fetch(req)
    return res(
      ctx.status(proxy.status),
      ctx.set(proxy.headers),
      ctx.body(await proxy.text())
    )
  })
]

const worker = setupWorker(...handlers)
worker.start()

Read about performing original requests with ctx.fetch.

Feel free to create a reproduction repository if you find this suggestion not working as expected.

[kettanaito]

You had the correct setup but performed the request to the same URL that was intercepted: /api/user.

Instead, construct the correct proxy URL in the resolver and use it to proxy all requests:

// src/mocks/browser.ts
import {
  setupWorker,
  rest,
  RESTMethods,
  ResponseResolver,
  RestRequest,
  RestContext,
} from 'msw'
import { headersToObject } from 'headers-utils'

function createProxy(
  url: string,
  resolver: ResponseResolver<RestRequest, RestContext>
) {
  return Object.values(RESTMethods).map((method) => {
    return rest[method.toLowerCase() as Lowercase<typeof method>](url, resolver)
  })
}

export const handlers = [
  /**
   * @todo Replace with `rest.all()` once the next version of "msw" is released.
   */
  ...createProxy('/api/*', async (req, res, ctx) => {
    const proxyUrl = new URL(req.url.pathname, 'https://reqres.in')
    const proxy = await ctx.fetch(proxyUrl.href)

    return res(
      ctx.status(proxy.status),
      ctx.set(headersToObject(proxy.headers)),
      ctx.body(await proxy.text())
    )
  }),
]

export const worker = setupWorker(...handlers)

With this change your usage example seems to be correct:

Note that I'm using the headers-utils package that is a dependency of "msw". I'd recommend installing that package explicitly so you don't depend on MSW internals that much.

[loia5tqd001]

@kettanaito I've realized that it doesn't work with CORS requests just like a server proxy. Do you know how to bypass CORS proxy with service worker just like a server proxy? After researching I still don't know if it's possible or not though.

[kettanaito]

I think that CORS handling is about the same as without the Service Worker. You need to ensure that the endpoint you request allows CORS in any appropriate way. The only kind of requests you can do cross-origin from localhost are opaque requests with mode: 'no-cors'. I'm currently unaware of another way to handle this.

[jcollum-nutrien]

I'm a little confused, is this sample something I can use as a stand-alone server, like I start a server locally with this, point all my POSTs from my app at it and it will send a canned response for some of them and pass the others through to the real server?

[kettanaito]

@jcollum-nutrien, could you please clarify what sample you're referring to?

You can use the msw package to mock requests in your JavaScript app (browser or Node.js). You can also use the @mswjs/http-middleware package in addition to that if you wish to spawn it as a local server. You don't have to. It's much better, in fact, to have the client-side interception since you don't alter your code in any way when using it.