Cannot Proxy Requests From React Node.js App to Express Backend

Traefik Traefik v2 (latest)
, ,
1

Details

I'm having issues understanding how to proxy my requests to Express routes in my backend while accounting for the local development env. use case and the docker containerized use case. What I'm trying to setup up is a situation in which I have "proxy" configured for "http://localhost:8080" on my local env and http://api:8080 configured for my container. What I have thus far is createProxyMiddleware configured like so...

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  console.log(process.env.API_URL);
  app.use(
    '/api',
    createProxyMiddleware({
      target: process.env.API_URL,
      changeOrigin: true,
    })
  );
};

And my docker-compose file is configured like so...

version: "3.7"
services:
  client:
    image: webapp-client
    build: ./client
    restart: always
    environment:
      - API_URL=http://api:8080
    volumes:
      - ./client:/client
      - /client/node_modules
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.client.rule=PathPrefix(`/`)"
      - "traefik.http.routers.client.entrypoints=web"
      - "traefik.port=3000"
    depends_on: 
      - api
    networks:
      - webappnetwork

  api:
    image: webapp-api
    build: ./api
    restart: always
    ports:
      - "8080:8080"
    volumes:
      - ./api:/api
      - /api/node_modules
    networks:
      - webappnetwork

  traefik:
    image: "traefik:v2.5"
    container_name: "traefik"
    restart: always
    command:
      - "--log.level=DEBUG"
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.web.address=:80"
    ports:
      - "80:80"
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock:ro"
    networks:
      - webappnetwork

networks:
  webappnetwork:
    external: true
volumes:
  pg-data:
  pgadmin:

Upon startup, the container logs out...

[HPM] Proxy created: /  -> http://api:8080

My axios calls look like this...

const <config_name> = {
        method: 'post',
        url: '/<route>',
        headers: {
          'Content-Type': 'application/json'
        },
        data: dataInput
      }

As you can see, I set the environment variable and pass that into the createProxyMiddleWare method, but for some reason, this config doesn't work and gives a 404 when I try to hit a route. Any help with this would be greatly appreciated!