求助：ReactJS前端与ASP.NET Core后端通过ngrok连接失败

新手尝试连接ReactJS前端与ASP.NET Core后端实现数据收发，使用ngrok暴露前后端后，前端URL可正常打开，但登录时无法连接后端，后端URL出现ERR_NGROK_3004错误。

现有配置 #

后端launchsettings.json #

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:56440",
      "sslPort": 44385
    }
  },
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "launchUrl": "swagger",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "WebAPIv1._1": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "swagger",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "https://localhost:5001;http://localhost:5000"
    }
  }
}

前端proxy.js #

const { createProxyMiddleware } = require("http-proxy-middleware");
import * as Path from "../Productivity/state/apiRoutes";

module.exports = app =>{
    app.use(
        createProxyMiddleware('/department',
        {
            target : 'https://localhost:44385/api',
            changeOrigin : true
        })
    )
}

ngrok.yml #

version: "2"
authtoken: 
tunnels:
    frontend:
        proto: http
        addr: 3000
    backend:
        proto: http
        addr: 44385

解决方案 #

1. 修复ERR_NGROK_3004错误 #

ERR_NGROK_3004是因为用http协议转发了HTTPS端口（44385是IIS Express的SSL端口），ngrok无法通过HTTP协议连接HTTPS服务。修改ngrok.yml的后端配置，将proto改为https：

version: "2"
authtoken: 
tunnels:
    frontend:
        proto: http
        addr: 3000
    backend:
        proto: https
        addr: 44385

重新执行ngrok start frontend backend，此时后端的ngrok URL会是HTTPS协议，不会再触发3004错误。

2. 调整前端与后端的连接逻辑 #

方案A：修改前端代理目标为ngrok后端URL

启动ngrok后，复制后端的HTTPS域名（例如https://xxxx-xx-xx-xx-xx.ngrok.io），替换proxy.js中的target：

module.exports = app =>{
    app.use(
        createProxyMiddleware('/department',
        {
            target : 'https://xxxx-xx-xx-xx-xx.ngrok.io/api',
            changeOrigin : true,
            secure: false // 忽略ngrok证书的本地校验，仅开发环境使用
        })
    )
}

修改后重启React开发服务器，前端请求会通过代理转发到ngrok后端服务。

方案B：配置后端CORS允许前端ngrok域名访问

如果不想每次修改代理配置，可在ASP.NET Core后端启用CORS：

1. 在Program.cs中添加CORS服务：

builder.Services.AddCors(options =>
{
    options.AddPolicy("NgrokCors", policy =>
    {
        // 替换为你的前端ngrok域名，例如https://yyyy-xx-xx-xx-xx.ngrok.io
        policy.WithOrigins("https://yyyy-xx-xx-xx-xx.ngrok.io")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

2. 在中间件管道中启用CORS（放在app.UseRouting()之后，app.UseAuthorization()之前）：

app.UseCors("NgrokCors");

3. 修改前端API请求地址为后端ngrok域名，无需本地代理即可直接请求。

3. 验证后端服务可用性 #

打开浏览器访问后端ngrok URL的Swagger页面（例如https://xxxx-xx-xx-xx-xx.ngrok.io/swagger），能正常加载则说明后端服务与ngrok配置无问题。

4. 注意事项 #

• 确保后端启动的是IIS Express profile（对应44385端口），若使用WebAPIv1._1 profile，需同步修改ngrok.yml的addr为5001或5000。
• ngrok域名每次重启会变化，方案A需同步更新代理target，方案B需更新CORS允许域名；开发环境可临时允许所有来源（仅测试用）：

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

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