React/ViteJS: 404 Not Found with Proxy and Apigee after deploying to IIS

Question

I was dealing with this issue a couples of days and really need your help.

I have a project in ViteJS that accesses a public endpoint on Apigee (GCP). I implemented a proxy in the development environment to eliminate CORS issues and it works perfectly on my local.

// Vite.config

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: { chunkSizeWarningLimit: 1600 },
  server: {
    proxy: {
      "/api/v1": {
        target: "https://apigee.test-svc-232/api/v1",
        changeOrigin: true,
      },
    },
  },
});

// Test.js

const fetchData = async () => {
  let data = qs.stringify({
    grant_type: "client_credentials",
  });

  let config = {
    method: "post",
    maxBodyLength: Infinity,
    url: "/api/v1",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization:
        "Basic ...",
    },
    data: data,
  };

The problem occurs when deploying it in production on an IIS server. My web.config file is as follows:

//Web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Reverse Proxy to api" stopProcessing="true">
          <match url="^api/v1$" />
          <action type="Rewrite" url="https://apigee.test-svc-232/api/v1" />
        </rule>
    
    <rule name="React Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
  </rewrite>
  <httpProtocol>
    <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

The given apigee url is a reference, the real one works perfectly and returns the data (it's public and opened for consuming).

After deploying to IIS, I got 404 Not Found with the API calls. Request URL: https://test.website.net/api/v1 Request Method: POST Status Code: 404 Not Found

It appears that the rewrite rules are not functioning correctly, as the API calls are resulting in a 404 Not Found error. This indicates that the requests are not being properly routed through the proxy, which is intended to avoid CORS issues with Apigee.

What is the correct configuration that my Web.config should have, or what other considerations should I take to resolve my problem? Do I need to change anything in the React code? Should I check the IIS configuration or include any certificates, etc.?

I checked this post and tried that solution but still not working: React: 404 Not Found with Proxy after deploying to IIS

Thanks in advance!

Answer 1

Try to change the rewrite action to url="/index.html" ensures that the React application handles client-side routing correctly in React Routes rule.

If this doesn't work, use Failed Request Tracing to get detailed log information that will help you better pinpoint the cause of the problem.