时间戳

首页 > 解决方案 > UI 和 API 的两个独立解决方案

angular - UI 和 API 的两个独立解决方案

问题描述

我有一个开箱即用的问题，不是技术性的，无法获得一些解决方案。

我在很多地方看到开发人员正在使用 Visual Studio Code 创建一个单独的 Angular 应用程序项目，并使用 Visual Studio 2019 IDE 为 .NET Core Web API 应用程序创建一个单独的项目。

我还看到在某些地方只有一个 .NET Core 解决方案，我们也将 Angular 应用程序作为同一个 Visual Studio 解决方案中的项目之一。我理解的一个优点是，在后端 API 代码保持运行的同时，很容易从前端调试 API 代码。

但是，当我们在前端使用 Angular 并在后端使用 Web Api 时，哪一种是创建解决方案的好方法，以及为什么。抱歉，我是 Angular 的新手，所以试图理解这种差异。任何帮助将不胜感激。

标签： angularvisual-studioapi

解决方案

您看到的方式（2 个单独的项目，一个在 VS 代码中用于 Angular，一个在 Visual Studio 中用于 .NET CORE）是绝对正确的。

原因有很多：

1 - Vscode 是前端开发的最佳编辑器之一，并且有很多角度插件

2 - 视觉工作室。是 .NET 和 .NET 核心项目的最佳 IDE，具有漂亮的智能感知和许多您在任何其他 IDE 中都找不到的功能 .. 现在您也可以在 MAC ( https://visualstudio.microsoft.com/it/vs/mac/) 上使用它 .. 但对于前端它是不如 vscode

3 - 您可以只在前端工作或只在后端工作，而无需加载所有项目。

4 - 如果您需要同时处理两者并调试所有堆栈，您可以毫无问题地完成（只需在后端启用 CORS）

你可以通过把这段代码放在你的startupl.cs文件中的configureServiceput方法中来做到这一点

services.AddCors(options =>
            {
                options.AddPolicy("AllowAllOrigins",
                    builder =>
                    {
                        //builder.WithOrigins("https://yoursite.com",
                        //    "https://stage.yoursite.com",
                        //     
                        //    "https://www.yoursite.com");
                        builder
                                                .AllowAnyOrigin()
                        .AllowAnyHeader()
                        .AllowCredentials()
                        .WithExposedHeaders("Content-Disposition")
                        .AllowAnyMethod();
                    });
            });

然后在你的Configure方法中

 app.UseCookiePolicy();

            app.UseCors("AllowAllOrigins"); //<-- USE IT
            app.UseAuthentication();

希望对你有帮助！

推荐阅读