Visual Studio 中的 Angular 项目与 ASP.NET Web API 项目

Question

我在 Visual Studio 2017 中有一个包含两个项目的解决方案。

其中一个包含我用于客户端 SPA 的所有 Angular 文件。另一个是 ASP.NET Web API 项目，用作 Angular 前端进行的 http 调用的端点。

我正在使用 Angular CLI 和 ng-serve 将我的 Angular 应用程序部署到 localhost:4200

Web api 部署到 localhost:6463

在生产环境中，它们将位于同一域下。但是，在开发过程中，它们不在同一个域中，因为本地主机的端口不同。迫使我实现 CORS，因为 Angular 应用程序必须与 Web API 对话。

对我来说，仅出于开发目的而实施 CORS 似乎不太理想。

有没有更好的结构？或者我有什么遗漏的吗？

Answer 1

简单的答案

\n\n

否。 请参阅下面的代理部分以获取更新的答案。

\n\n

您需要启用 CORS。根据ASP.NET Core 的 Microsoft 官方文档，在有关跨源请求 (CORS) 的部分下，他们提供了“同源”的定义的定义：

\n\n

什么是“同源”？

\n\n

如果两个 URL 具有相同的方案、主机和端口，则它们具有相同的来源。（RFC 6454）
\n这两个 URL 具有相同的来源：

\n\n

\n
• http://example.com/foo.html
\n
• http://example.com/bar.html
\n

\n\n

这些 URL 与前两个 URL 的来源不同：

\n\n

\n
• http://example.net- 不同的域
\n
• http://www.example.com/foo.html- 不同的子域
\n
• https://example.com/foo.html- 不同的方案
\n
• http://example.com:9000/foo.html-不同端口 \xe2\x87\xa6 \xe2\x87\xa6 \xe2\x87\xa6 \xe2\x87\xa6 您的问题
\n

\n\n

\n

笔记：
\n Internet Explorer 在比较源时不考虑端口。

\n

\n\n

如何启用 CORS

\n\n

为您的案例启用 CORS 的快速方法：

\n\n

启动.cs

\n\n

app.UseCors(builder => builder.WithOrigins("localhost"));\n

\n\n\n\n

\n

更新： \n 根据本教程，无需 CORS 也可以做到这一点。

\n

\n\n

代理 API

\n\n

您需要创建一个名为proxy.conf.json在 Frontend 目录中创建一个名为的文件：

\n\n

{\n  "/api": {\n    "target": "http://localhost:65498",\n    "secure": false\n  }\n}\n

\n\n

目标值包含端口号。如果您\xe2\x80\x99使用Visual Studio，则可以从后端项目属性中读取它。

\n\n

\n\n

这会将所有 API 请求传递给正在运行的 ASP.NET Core 应用程序。

\n\n

我们在这里需要做的最后一件事是修改 npm start 脚本，因此它使用代理配置。打开package.json，找到scripts部分，将启动命令修改为：

\n\n

"start": "ng serve --proxy-config proxy.conf.json"\n

\n\n

要使用该应用程序，您需要启动 ng 开发服务器和 ASP.NET 应用程序。npm start第一个是从 Frontend 目录执行的命令启动的。后端应用程序可以从 Visual Studio 或命令行启动dotnet watch run. 如果您使用命令行版本，请注意它使用的端口并在代理配置文件中正确设置它。dotnet 中的 watch 命令监视应用程序中的更改，并在您更改某些内容时重建它。

\n