使用 Angular 的服务器上的 WebApi 身份验证失败答案

【问题标题】：WebApi authentication failed on server with Angular使用 Angular 的服务器上的 WebApi 身份验证失败
【发布时间】：2020-06-17 16:32:28
【问题描述】：

我正在使用带有 Angular 6 的 Asp.Net Web API 2.0 用于 UI。该解决方案包含 Angular 和 Web API 的项目。当我在本地主机上的 Visual Studio 上运行它时，我的解决方案工作正常（我能够访问页面和登录）。但是，当我在服务器上部署构建时，我无法登录并收到以下错误：

CORS 策略已阻止从源“http://xx.xx.xx.xxx:xxxxx”访问“http://xx.xx.xx.xxx:xxxxx/authenticate”处的 XMLHttpRequest ：请求的资源上不存在“Access-Control-Allow-Origin”标头。

【问题讨论】：

标签： c# angular authentication asp.net-web-api asp.net-web-api2

【解决方案1】：

要快速处理 Web API 的 CORS，请在 <system.webServer> 部分的 Web API 的 web.config 文件中添加以下设置：

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

但启用 CORS 存在安全风险。一个很好的解释是here。

【讨论】：

感谢您的回答，请让我验证它是否有效。
我认为以您展示的方式启用 CORS 的风险在于，无论页面托管在何处，都将接受请求。如果您将 CORS 正确配置为仅接受来自已知页面的请求，则不会存在安全风险。
@John Risk 与常见的基于 Internet 的 Web 应用程序无关。但是，如果您的应用程序有一些机密资源，那么正如您所说，我们应该允许有限的来源。
@as.if.i.code 好吧，它没有用。还有什么建议吗？
@SushantRawat 你还遇到同样的错误吗？

【解决方案2】：

能否将以下代码添加到 startup.cs -> configure()

app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin().AllowCredentials());

【讨论】：

我已经在我的 Web API 代码中使用了它。你能推荐点别的吗？

【解决方案3】：

浏览器安全性可防止网页向另一个域发出 AJAX 请求。此限制称为同源策略，可防止恶意站点从另一个站点读取敏感数据。但是，有时您可能希望让其他网站调用您的 Web API。

Install-Package Microsoft.AspNet.WebApi.Cors

打开文件 App_Start/WebApiConfig.cs。在 WebApiConfig.Register 方法中添加如下代码：config.EnableCors();

接下来，将 [EnableCors] 属性添加到 Controller 类

[EnableCors(origins: "*", headers: "*", methods: "*")]
    public class TestController : ApiController
    {
        // Controller methods not shown...
    }

现在您可以访问 API 的

【讨论】：