Question

在Visual Studio中，我有两个应用程序。一个是Angular 2网站，另一个是WebApi项目。我在WebAPI方法中有一个断点，当Angular服务尝试检索数据但页面上没有显示任何内容时会触发该断点。打开浏览器控制台我收到以下错误：

XMLHttpRequest cannot load http://localhost:58949/api/people. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:62761' is therefore not allowed access.

解决此问题的最佳方法是什么？我通过创建一个承载WebAPI和角度应用程序的MVC应用程序来完成这项工作，但我不喜欢这个解决方案。

Answer 1

您必须在网络API端启用CORS。

我假设您正在使用WebApi Core。要在web api端启用CORS，您必须执行以下步骤 -

首先，在project.json中添加依赖项 - “Microsoft.AspNetCore.Cors”：“1.0.0”，

然后在startup.cs中启用CORS，就像这样 -

app.UseCors(builder => {
    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
});

您可以在此处找到有关CORS的更多信息 - https://github.com/kriffe/threejs-extras

看看这是否有帮助。

Answer 2

您遇到的问题是浏览器默认情况下不允许跨源请求。正如你所说，你有两个网站，它们有不同的网址，在你的情况下很可能只是localhost上的不同端口，但这仍然算作“不同”的来源并且是一种安全措施。您始终可以允许所有来源或您的Angular来源访问您的Web API：

Access-Control-Allow-Origin: http://foo.com
Access-Control-Allow-Methods: GET, PUT, DELETE

ASP.NET有一个内置的包可以为你做到这一点，所以你不需要样板。您可以阅读更多相关信息here。基本上它只会在您的web api响应中添加一些标题，如上例所示。

Answer 3

我在WepApi项目中使用它。它位于WebApiConfig.cs。

        // Use NuGet to add this: http://www.nuget.org/packages/Microsoft.AspNet.WebApi.Cors
        config.EnableCors();

无法检索WebAPI数据

3 个答案: