IIS中网站添加Web API应用后，React前端如何配置API地址？

一、先把React的.env配置对 #

首先得搞清楚你的API在IIS里的实际对外访问路径：如果API是作为当前网站的子应用部署（比如网站绑定的IP/域名是http://你的服务器IP，子应用别名设的是api），那API的根路径就是http://你的服务器IP/api，别用localhost开头——localhost只在服务器本地生效，外部机器根本访问不了。

直接在React的.env文件里这么写：

REACT_APP_API_URL=http://你的服务器IP/api

要是服务器绑了域名，就把IP换成域名，比如http://你的域名.com/api。前端调用接口的时候，直接拼路径就行，比如${process.env.REACT_APP_API_URL}/controllername，注意别重复加斜杠。

二、给IIS加URL重写规则（解决路由冲突） #

React是单页应用，IIS得配置重写规则，既要让前端路由正常跳转，又要保证API请求能正确打到后端应用池。给前端的web.config加下面这些配置：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 优先把API请求转发到后端子应用 -->
        <rule name="API Forward" stopProcessing="true">
          <match url="^api/(.*)" />
          <!-- 如果API是子应用，直接用相对路径就行 -->
          <action type="Rewrite" url="api/{R:1}" />
        </rule>
        <!-- React单页路由重写，确保刷新页面不404 -->
        <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="/index.html" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
    </staticContent>
  </system.webServer>
</configuration>

三、后端ASP.NET Core的关键配置 #

1. 开CORS允许前端访问 #

在Program.cs里加CORS中间件，明确允许前端的访问地址：

var builder = WebApplication.CreateBuilder(args);

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReact", policy =>
    {
        // 填前端的实际访问地址，比如http://你的服务器IP:9000
        policy.WithOrigins("http://你的服务器IP:9000")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

builder.Services.AddControllers();

var app = builder.Build();

// 注意：CORS要放在路由前面启用
app.UseCors("AllowReact");

app.UseHttpsRedirection();
app.UseAuthorization();

app.MapControllers();

app.Run();

要是测试环境嫌麻烦，也可以暂时允许所有来源（生产环境绝对别这么干）：

policy.AllowAnyOrigin()
      .AllowAnyHeader()
      .AllowAnyMethod();

2. 后端web.config确保ASP.NET Core正常运行 #

发布后的API的web.config要确认配置对了ASP.NET Core模块：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processPath="dotnet" arguments=".\你的API项目.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />
    </system.webServer>
  </location>
</configuration>

hostingModel选inprocess或者outofprocess都行，选后者的话要确保端口没被其他服务占用。

四、一步步验证 #

1. 先单独测API：在浏览器里输http://你的服务器IP/api/controllername，看能不能返回正常数据，确认API在IIS里能正常访问。
2. 测前端：打开http://你的服务器IP:9000，看浏览器控制台的网络请求，有没有跨域错误，接口能不能拿到数据。
3. 外部机器测试：从其他电脑访问前端地址，检查接口请求是否正常。

内容的提问来源于stack exchange，提问作者peemerdu