Create React App部署IIS:配置Rewrite规则实现路由转发咨询
IIS Rewrite Configuration for Create React App with API Forwarding
Hey there! I’ve helped plenty of folks set up CRA deployments on IIS with exactly these requirements—let’s fix those rewrite rules for you. The key here is rule order (IIS processes rules top-to-bottom) and making sure we don’t accidentally intercept static files or API calls.
Here’s the complete web.config you should place in your CRA’s build directory (the root of your IIS site):
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <!-- Rule 1: Forward all /api/* requests to your MVC server --> <rule name="Forward API Requests" stopProcessing="true"> <match url="^api/(.*)" /> <action type="Rewrite" url="http://your-mvc-server-address/api/{R:1}" /> <!-- Replace "http://your-mvc-server-address" with your actual MVC server URL --> </rule> <!-- Rule 2: Serve static files directly for /content/* and /static/* --> <rule name="Serve Static Content Directly" stopProcessing="true"> <match url="^(content|static)/(.*)" /> <action type="None" /> <!-- No rewrite needed—let IIS serve the files as-is --> </rule> <!-- Rule 3: Fallback all other requests to index.html (SPA routing) --> <rule name="SPA Fallback to Index" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <!-- Only apply this rule if the requested file/directory doesn't exist --> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <!-- Double-check we're not matching API or static paths (redundant but safe) --> <add input="{REQUEST_URI}" pattern="^/(api|content|static)/" negate="true" /> </conditions> <action type="Rewrite" url="/index.html" /> </rule> </rules> </rewrite> <!-- Optional: Enable gzip compression for better performance --> <httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files"> <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" /> <dynamicTypes> <add mimeType="text/*" enabled="true" /> <add mimeType="application/javascript" enabled="true" /> <add mimeType="application/json" enabled="true" /> <add mimeType="*/*" enabled="false" /> </dynamicTypes> <staticTypes> <add mimeType="text/*" enabled="true" /> <add mimeType="application/javascript" enabled="true" /> <add mimeType="application/json" enabled="true" /> <add mimeType="*/*" enabled="false" /> </staticTypes> </httpCompression> </system.webServer> </configuration>
Let’s break down each rule:
Forward API Requests:
- Matches any URL starting with
api/(the^ensures it’s at the start of the path). - Rewrites the request to your MVC server, using
{R:1}to preserve the rest of the API path (e.g.,/api/users/1becomeshttp://your-mvc-server/api/users/1). stopProcessing="true"means once this rule matches, IIS won’t check the rest—critical so API calls don’t get caught by the SPA fallback.
- Matches any URL starting with
Serve Static Content Directly:
- Matches paths starting with
content/orstatic/. action type="None"tells IIS to serve the actual file from the filesystem instead of rewriting the URL.- Again,
stopProcessing="true"ensures these static assets aren’t redirected toindex.html.
- Matches paths starting with
SPA Fallback to Index:
- Matches any URL (
.*), but only if:- The requested file doesn’t exist (so we don’t override actual static files like
main.jsorfavicon.ico). - The requested directory doesn’t exist.
- The URL doesn’t start with
api/,content/, orstatic/(a safety net even though earlier rules should catch these).
- The requested file doesn’t exist (so we don’t override actual static files like
- Rewrites the request to
/index.html, letting React Router handle the frontend routing.
- Matches any URL (
Key Notes to Avoid Issues:
- Replace the MVC Server URL: Make sure
http://your-mvc-server-addresspoints to your actual MVC application (include the port if it’s not using 80/443). - Install IIS Rewrite Module: You’ll need the IIS URL Rewrite Module installed on your server—this is required for the rules to work.
- Check File Permissions: Ensure the IIS app pool identity has read access to the
builddirectory’s files. - Test Each Path: Verify:
/api/your-endpointforwards correctly to the MVC server./content/your-file.cssloads the static file directly./aboutor other frontend routes loadindex.htmland let React Router handle the rest.
内容的提问来源于stack exchange,提问作者Michael




