如何根据环境调整API与MVC项目端口配置解决跨端口调用问题

现有配置信息 #

API项目配置（launchSettings.json） #

"profiles": {
  "LGSafetyAPI": {
    "commandName": "Project",
    "dotnetRunMessages": true,
    "launchBrowser": true,
    "launchUrl": "swagger",
    "applicationUrl": "https://localhost:7295;http://localhost:5295",
    "environmentVariables": {
      "ASPNETCORE_ENVIRONMENT": "Development"
    }
  },
  "IIS Express": {
    "commandName": "IISExpress",
    "launchBrowser": true,
    "launchUrl": "swagger",
    "environmentVariables": {
      "ASPNETCORE_ENVIRONMENT": "Development"
    }
  }
}

MVC项目配置（launchSettings.json） #

"iisSettings": {
  "windowsAuthentication": false,
  "anonymousAuthentication": true,
  "iisExpress": {
    "applicationUrl": "http://localhost:52964",
    "sslPort": 44394
  }
}

问题描述 #

MVC项目通过Ajax调用API时，错误指向了自身的HTTPS端口44394，而非API的7295端口，需要根据环境调整配置解决这个问题。

解决方案 #

1. 用环境配置文件存储API地址 #

在MVC项目的appsettings.json（以及对应环境的appsettings.Development.json、appsettings.Production.json）中添加API地址配置：

"ApiSettings": {
  "BaseUrl": "https://localhost:7295" // 开发环境地址
}

生产环境直接替换为正式API域名即可，比如"BaseUrl": "https://your-official-api-domain.com"

2. 在MVC项目中注册并读取配置 #

• 新建ApiSettings.cs配置类：

public class ApiSettings
{
    public string BaseUrl { get; set; }
}

• 在Program.cs中注册配置：

builder.Services.Configure<ApiSettings>(builder.Configuration.GetSection("ApiSettings"));

3. 在前端代码中使用正确的API地址 #

方式一：Razor视图直接注入

在需要调用API的Razor视图中注入配置，直接拼接接口地址：

@inject IOptions<ApiSettings> ApiSettings
<script>
    const apiBaseUrl = '@ApiSettings.Value.BaseUrl';
    // Ajax调用示例
    $.ajax({
        url: `${apiBaseUrl}/api/your-target-endpoint`,
        method: 'GET',
        success: function(data) {
            // 处理返回数据
        }
    });
</script>

方式二：全局注入给独立JS文件

如果API调用逻辑写在单独的JS文件中，先在布局页把API地址设为全局变量：

@inject IOptions<ApiSettings> ApiSettings
<script>
    window.apiBaseUrl = '@ApiSettings.Value.BaseUrl';
</script>
<script src="~/js/your-custom-script.js"></script>

然后在JS文件中直接使用全局变量拼接地址：

// your-custom-script.js
$.ajax({
    url: `${window.apiBaseUrl}/api/your-target-endpoint`,
    method: 'POST',
    data: yourRequestData,
    success: function(res) {
        // 处理逻辑
    }
});

4. 配置API的跨域允许（必做） #

API项目需要允许MVC项目的跨域请求，在API的Program.cs中添加跨域中间件：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowMvcOrigin",
        policy => policy.WithOrigins("https://localhost:44394") // MVC的HTTPS地址
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

// 注意中间件顺序：放在UseRouting之后，UseAuthorization之前
app.UseCors("AllowMvcOrigin");

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