部署至Somee的ASP.NET Core+React项目后端接口无法调用

问题现象 #

已将ASP.NET Core+React项目部署至somee.com，前端页面加载正常，但Axios的GET请求返回如下网络错误：

{
    "message": "Network Error",
    "name": "AxiosError",
    "stack": "AxiosError: Network Error\n    at l.onerror (http://something.somee.com/static/js/main.17849c8f.js:2:700322)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://something.somee.com:5030/api/user/null"
    },
    "code": "ERR_NETWORK",
    "status": null
}

已做的配置 #

Axios请求代码 #

const apiUrl = process.env.REACT_APP_API_URL;
const response = await axios.get(`${apiUrl}/user/taskss/${params.id}`);

.env文件配置 #

REACT_APP_API_URL=http://something.somee.com:5030

appsettings.json配置 #

"Kestrel": {
    "Endpoints": {
      "Http": {
        "Url": "http://something.somee.com:5030"
      }
    }
  },

Program.cs配置 #

var hostBuilder = WebHost.CreateDefaultBuilder(args);

// Set the listening URL using the UseUrls method
hostBuilder.UseUrls("http://something.somee.com:5030");

var app = builder.Build();

// Enable CORS
app.UseCors(options => options
    .AllowAnyOrigin()
    .AllowAnyHeader()
    .AllowAnyMethod()
);

问题排查与解决建议 #

1. 端口配置错误：somee.com作为托管平台，不会允许自定义端口（如5030）直接对外暴露，平台会自动分配默认的HTTP/HTTPS端口（80/443），你指定的5030端口外部无法访问，这是核心问题。

   • 修复：移除API URL中的端口号，将.env里的REACT_APP_API_URL改为http://something.somee.com（或HTTPS协议的https://something.somee.com）；同时删除appsettings.json和Program.cs中指定端口的配置，让平台自动分配端口。

2. 请求参数为空：从错误URL可以看到params.id的值是null，这会导致后端路由无法匹配，甚至触发服务器异常。

   • 修复：发起请求前先校验params.id的合法性，确保其不为null或空值后再发送请求。

3. CORS中间件顺序错误：CORS中间件必须放在路由、授权中间件之前才能生效，当前代码中app.UseCors的位置如果在app.UseRouting()或app.UseEndpoints()之后，会导致CORS配置失效。

   • 修复：调整Program.cs中间件顺序，确保app.UseCors()在app.UseRouting()之后、app.UseAuthorization()和app.UseEndpoints()之前：

     var builder = WebApplication.CreateBuilder(args);
     
     // 省略其他服务注册代码...
     
     var app = builder.Build();
     
     app.UseRouting();
     
     app.UseCors(options => options
         .AllowAnyOrigin()
         .AllowAnyHeader()
         .AllowAnyMethod()
     );
     
     app.UseAuthorization();
     
     app.UseEndpoints(endpoints =>
     {
         endpoints.MapControllers();
     });
     
     app.Run();
     

4. HTTPS强制跳转问题：somee.com可能强制使用HTTPS访问，HTTP请求会被拦截导致网络错误。

   • 修复：将API URL改为HTTPS协议，.env中配置REACT_APP_API_URL=https://something.somee.com，平台会自动配置HTTPS证书，无需额外操作。

内容的提问来源于stack exchange，提问作者Mohamed Yousef Khairlden