如何规避 Angular 应用程序的 .NET 6 SPA 代理？

Question

编辑：我设法使用有效证书通过 IIS 运行此程序，但我还没有找到放弃新代理方法的方法。如果您想了解有关使用 IIS 而不是 IIS Express 的一些信息，请跳到结尾。

简而言之：使用最新的 ASP.NET 6 和 Angular 模板 (Visual Studio 2022)，如何绕过反向代理并使用与以前版本的 .NET 相同的方法？我不想通过 SPA URL 运行应用程序，并将后端请求转发到 SPA 代理。

详细来说，我的目标：

• 没有 IIS Express
• 通过终端手动启动 Angular 服务器。
• 配置 ASP.NET 应用程序以连接到 Angular 服务器，而不是启动它自己的实例，
• 使用自签名证书从 IIS 10 的本地实例运行 ASP.NET 应用程序。
• 根据需要将调试器附加到 w3wp。

我想导航到 https://mydomain.local 并让它为所有内容提供服务，这在 .NET 6 之前没有问题。您可以使用

UseProxyToSpaDevelopmentServer

，运行

npm start

，一切都很好。

虽然我知道您仍然可以使用它，但 .NET 6 放弃了

Startup.cs

，并且指南建议继续使用简化的

Program.cs

。

我已经尝试过：

• 摆脱预启动脚本(

  aspnetcore-https.js

  )
• 通过从

  proxy.conf.js

   中删除 proxyConfig 属性来摆脱代理配置 (

  angular.json
)
• 创建 IIS 启动配置文件并使用配置
• 更改 .csproj 文件中的 SPA 配置值。
• 摆脱 package.json 中的 --ssl 标志（ssl、ssl-cert 和 ssl-key）
• 在

  angular.json

中定义非默认主机
• 上述的组合

似乎没有任何效果，文档也不是很好。

此刻：

• 我有一个有效的自签名证书（使用 mkcert 创建）
• 我的域名是在主机文件中设置的
• IIS 中的应用程序设置，我可以使用有效的证书加载它。
• 加载后，它会查找由 csproj 文件中的

  SpaProxyServerUrl

  属性定义的值
• 一旦 Angular 运行，就会重定向到 https://locaolhost:xxxxx，但证书永远不会有效，我希望从 https://mydomain.local
提供页面

任何帮助将不胜感激。

---

我不确定自签名 ASP.NET 证书有什么问题。我只是删除了它的所有引用并再次添加它们。

• 从

  %AppData%\Roaming\ASP.NET\https

删除证书
• 通过 Internet 选项清除 SSL 缓存（运行命令：

  inetcpl.cpl

  ）
• 通过

  chrome://net-internals/#hsts

清除域的所有安全策略
• 清除 Chrome 历史记录（网站设置、缓存数据等。

  chrome://settings/clearBrowserData

  ）
• 从 Windows 证书存储中删除证书（运行命令：

  mmc

  文件 --> 添加/删除管理单元 --> 证书）。删除个人证书和受信任的根证书
• 通过在 VS 中构建项目或运行

  dotnet dev-certs https --trust

再次生成证书

要放弃 IIS Express 并回复普通 IIS 实例：

• 像平常一样将您的应用程序添加到 IIS。
• 创建 https 绑定，我建议使用

  mkcert

  创建有效的自签名证书。
• 确保 https 端口与

  launchSettings.json

中定义的端口匹配
• 更新

  launchSettings.json

  ，随时删除任何不需要的配置文件。你想要类似这样的东西：

{
    "iisSettings": {
        "windowsAuthentication": false,
        "anonymousAuthentication": true,
        "iis": {
            "applicationUrl": "https://yourdomain.local",
            "sslPort": 443
        }
    },
    "profiles": {
        "IIS": {
            "commandName": "IIS",
            "launchBrowser": true,
            "launchUrl": "https://yourdomain.local",
            "environmentVariables": {
                "ASPNETCORE_ENVIRONMENT": "Development",
                "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
            }
        }
    }
}

• 将新的 proxy-conf 文件（我称为 proxy-iis.conf）添加到您的 ClientApp 文件夹中，或更新现有的文件。如果您创建新的，请确保更新

  angular.json

  以相应地引用它。

const PROXY_CONFIG = [
    {
        context: [
            "/yourRoute",
        ],
        target: "https://yourdomain.local:443",
        secure: false,
        changeOrigin: true,
        logLevel: "info",
        headers: {
            Connection: 'Keep-Alive'
        }
    }
]

module.exports = PROXY_CONFIG;

• 检查您的

  .csproj

  文件并确保

  <SpaProxyServerUrl></SpaProxyServerUrl>

  中定义的端口与使用的端口匹配

  angular.json

就是这样，你就可以开始了。手动启动 Angular 应用程序，访问

https://yourdomain.local

，一切都应该很清楚。

Answer 1

我所做的就是将以下内容添加到我的 package.json 中，这样我就可以手动启动 Angular 并且不需要在每次服务器端更改时重新启动。

{
    ...
    "scripts": {
       "dev": "set ASPNETCORE_HTTPS_PORT=7186 && npm start"
     }  
    ...
}

将

7186

更改为 .Net 6 服务器运行的端口（在您的情况下为 443）。然后运行“npm run dev”，等待它加载并启动后端服务器。

Answer 2

在 Linux 上运行 Angular .Net 项目时我也遇到了这个问题，我为我们的项目修复了这个问题，我想运行 IIS 时也会出现同样的问题。

之前如何处理请求

Browser -> Angular dev server tries serving -> Rest to .Net server 

直接从 Angular 运行开发服务器，没有代理，什么都没有。优点是它可以正常工作，缺点是 image/jpeg 和 text/html 请求不通过 .Net 中间件。

现在

通过.Net启动SPA

Browser -> .Net server -> proxy-conf.js -> Angular dev server or .Net based on conf

或者如果您在本地运行项目

Browser -> Angular dev server -> proxy-conf.js -> .Net server

产品保持不变

Browser -> .Net server handles -> Server static files if needed

默认行为的变化

• 请求需要位于白名单上才能发送到 .net 服务器
• 请求之前运行选项请求
• 默认情况下，在未启用 followRedirects 的情况下请求重定向
• 重定向的请求不包含相同的标头（如授权）

什么对我有用

// proxy-conf.js
const { env } = require('process');

// replace 44373 with your .Net server https port. If not using SSL then you could use the http port I think.
const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:44373';

const PROXY_CONFIG = [
  {
    context: [
      // Add the urls you want to go to the server, double star is nice
      // "/api/*" matches "/api/controller" and 
      // "/api/**" matches "/api/controller/some/method/id"
      "/images/**",
      "/files/**",
      "/api/**"
   ],
    target: target,
    // This defaults to false, but absolutely needed to have the same behavior
    // as running the SPA through the .Net server.
    followRedirects: true,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  }
]

module.exports = PROXY_CONFIG;