c#-Visual Studio中带有ASP.NET Web API项目的Angular项目

我在Visual Studio 2017中有两个项目的解决方案.

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

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

Web API已部署到localhost：6463

在生产环境中,它们将属于同一域.但是,在开发中,它们不在同一域中,因为本地主机的端口不同.由于Angular应用程序不得不与Web api通信,因此迫使我实现CORS.

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

有没有更好的结构？还是我缺少什么？

解决方法:

简单答案

否.有关更新的答案,请参见下面的代理部分.

您将需要启用CORS.根据Official Microsoft Documentation for ASP.NET Core,在关于跨域请求(CORS)的部分下,它们提供了“相同来源”的定义：

什么是“原产地”？

如果两个URL具有相同的方案,主机和端口,则它们具有相同的来源. (RFC 6454)
这两个URL具有相同的来源：

> http://example.com/foo.html
> http://example.com/bar.html

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

> http://example.net-其他域
> http://www.example.com/foo.html-不同的子域
> https://example.com/foo.html-不同的方案
> http://example.com:9000/foo.html-不同的端口

Note:
Internet Explorer does not consider the port when comparing origins.

如何启用CORS

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

启动文件

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

Update:
According to 07001, it might be possible to do it without CORS.

API的代理

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

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

目标值包含端口号.如果您使用的是Visual Studio,则可以从后端项目属性中读取它.

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

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

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

要使用该应用程序,您需要同时启动ng dev服务器和ASP.NET应用程序.第一个是从前端目录执行的命令npm start来启动的.后端应用程序可以从Visual Studio启动,也可以在运行dotnet watch的命令行中启动.如果使用命令行版本,请注意其使用的端口,并在代理配置文件中正确设置它. dotnet中的watch命令监视应用程序中的更改,并在您进行任何更改时重新构建它.

标签：angular,asp-net-web-api2,cors,asp-net,c
来源： https://codeday.me/bug/20191111/2019104.html