I'm following the instruction on how to build react app in the IIS. URL However, for some reason, all my API calls are getting 404 errors. Any hints or advice would be appreciated!
I'm using a proxy in order to bypass CORS policy on specific URLs. Whenever I'm running using the terminal/code editor the API works perfectly, the response API errors only happen after I've deployed to the IIS.
Here are my codes:
Proxy i 've set:
const {createProxyMiddleware} = require("http-proxy-middleware");
module.exports = function(app) {
app.use(
createProxyMiddleware('/v3/quotes',{
target:'https://quote.dellsvc',
secure: false,
changeOrigin: true
})
);
web.config for react routes:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<cors enabled="true">
<add origin="*" >
<allowHeaders allowAllRequestedHeaders="true" />
</add>
</cors>
<rewrite>
<rules>
<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" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Terminal:- network request and console result:
Request URL: http://localhost:3000/v3/quotes?number=xxx&version=x
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:3000
Data response:
Able to retrieve the data correctly.
After deploying to IIS:- network request and console result:
Request URL: http://11.111.111.111:8000/v3/quotes?number=xxx&version=x
Request Method: GET
Status Code: 200 OK
Remote Address: 10.139.140.218:8000
Data response:
It shows the data of index.html instead of the API response data.
Note: The data is able to retrieve even though it has been deployed to IIS if without setting up a proxy (For example the API that is able to retrieve without the blockage from the CORS policy)
