React: 404 Not Found with Proxy after deploying to IIS - reactjs

Question

I really need your help and advice on this, I have been searching for 2 weeks and I'am unable to resolve my proxy issues.
I'm setting up the below 'setupProxy.js' to bypass the CORS while requesting the API/Endpoints from the (Web Servers).
However, the proxy and Origin replacement only works from localhost 3000 when using the terminal to run it. For some reasons, It doesn't work after deploying to IIS, it keep getting "404 Not Found". Could you please tell me what should I do to fix the issue here?
setupProxy.js:
app.use('/GCM.Order.API',
createProxyMiddleware({
target:'https://gcm.dellsvc',
secure: false,
changeOrigin: true
})
);
Axios call:
let gcmpapi =
  "/GCM.Order.API/api/v1/orders/purchase-summary-with-details"
Terminal/Localhost:3000 result: (200 ok)
However, in IIS browse :8080 (http) : (404 Not Found)
web.config file:
<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Rewrite Text Requests" stopProcessing="true">
<match url=".*" />
<conditions>
<add input="{HTTP_METHOD}" pattern="^GET$" />
<add input="{HTTP_ACCEPT}" pattern="^text/html" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

Answer 1

i had exactly the same problem i was dealing with for 2 weeks. Finally I have a satisfactory solution.
http-proxy-middleware or proxy in package.json is intended (in my opinion) for development purposes only.
What you have created is absolutely correct, but you can only use it in development.
For production settings, is only handled at the url rewrite level. And I think it's logical. It's separate from the code, and if there's an error in the code (eg a bad endpoint pointing to localhost), it won't affect production.
The solution is to modify the url rewrite in the web.config file, which is stored securely in IIS.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Reverse Proxy to api" stopProcessing="true">
<match url="^api/(.*)" />
<action type="Rewrite" url="https://api.example.com/{R:0}" />
</rule>
<rule name="Reverse Proxy to pusher" stopProcessing="true">
<match url="^pusher/(.*)" />
<action type="Rewrite" url="https://pusher.example.com/{R:0}" />
</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>
</configuration>