how to set http proxy

[poyiding]

in remix.config.js is not have a proxy config, so I add a proxy.js and use createProxyMiddleware to proxy http://jsonplaceholder.typicode.com。in this file, the proxy serve listen 8000 , then visited http://localhost:8000/users is ok。
but Remix app at http://localhost:3000/ ，so how to proxy http://localhost:3000/users can work ？

related issue

[davidlukerice]

We're running into this as well. We typically point our local to various staging or prod servers for developing/debugging and don't see a way to do that with remix. In create-react-app, there was the setupProxy.js file that handled this for us.

Looks like there's a way to proxy the backend express server (#1494 (comment)), but still looking into that as a solution.

[sergiodxa]

Because Remix itself is not the server, this shouldn't be handled by Remix but by your server of choice, if you use Remix App Server you will have to switch to Express (Remix App Server uses Express internally) and then configure your proxy there.

If you use another option like Vercel, Netlify, etc. you will have to check on their respective configuration files if there's a way to setup a proxy.

Another option is to run NGINX or something similar and configure it as a reverse proxy for both the Remix and your API.

[HeinrichFilter]

As a workaround, I'm using Remix resource routes to do the proxying.

E.g. in my setupProxy.js I had a line that looked like this:

app.use("/api", createProxyMiddleware({ target: "http://localhost:5000/" }));

As replacement in Remix I created app/routes/api/$.tsx with the following content:

import { LoaderArgs, ActionArgs } from "@remix-run/node";

const target = "localhost:5000";

export async function loader({ request }: LoaderArgs) {
  const newUrl = new URL(request.url);
  newUrl.host = target;

  const newRequest = new Request(newUrl.toString(), new Request(request));
  return await fetch(newRequest);
}
export async function action({ request }: ActionArgs) {
  const newUrl = new URL(request.url);
  newUrl.host = target;

  const newRequest = new Request(newUrl.toString(), new Request(request));
  return await fetch(newRequest);
}

Not sure if I'll hit any edge cases but for now it seems to be working okay.

[shainegordon]

I did initially try this, and it worked, but I didn’t like that it ran in production. I don’t actually want to proxy in production.

[ehyland]

I hit one edge case. By default fetch will follow redirects, instead of allowing the browser to handle the redirect. I ended up getting cert errors because of this.

Configuring the request to not follow redirects did the trick

import type { ActionFunction, LoaderFunction } from "@remix-run/node";
import { config } from "~/config";

const apiURL = new URL(config.API_BASE_URL);

export const loader: LoaderFunction = (args) => {
  const url = new URL(args.request.url);
  url.protocol = apiURL.protocol;
  url.host = apiURL.host;

  return fetch(
    url.toString(),
    new Request(args.request, { redirect: "manual" }),
  );
};

export const action: ActionFunction = (args) => {
  const url = new URL(args.request.url);
  url.protocol = apiURL.protocol;
  url.host = apiURL.host;

  return fetch(
    url.toString(),
    new Request(args.request, { redirect: "manual" }),
  );
};

[shainegordon]

What I have come to love in my very little time spent so far with Remix, is that because everything happens on the server, you don’t actually need a proxy.
Proxy is used to solve browser things, like CORS.

What I did was just write a little typed fetch wrapper, and then declare the API base in .env

My loaders and actions call fetchFromApi<User>(“/api/users/123”), and internally we concatenate the baseUrl