从浏览器进行 API 调用有效，但不能从前端应用程序进行

Question

我有两个独立的项目：一个前端应用程序（Angular 2，使用 Visual Studio 代码）和一个后端应用程序（ASP.NET 核心，使用 Visual Studio 2015）。对于后端应用程序，当我执行“文件”>“新建项目”时，我选择了 "Windows Authentication."

在“属性”下，我选中了这些框：

当我从我的 浏览器 调用此 API 时，它工作正常：

        // GET: api/card
        [HttpGet]
        [Authorize(Roles = ActiveDirectory.User)]
        public Card[] Get()
        {
            var cards = _cardData.GetAll().ToList();

            var result = cards
                            .OrderByDescending(x => x.LastChanged);

            return result.ToArray();
        }

但是当我从 前端应用程序 进行调用时，我收到 401 错误：

    private _cardUrl = 'http://localhost:8462/api/card';

    getCards(): Observable<Card[]> {
        return this._http.get(this._cardUrl)
            .map((response: Response) => <Card[]>response.json())
            .catch(this.handleError);
    }

我应该指出，当我删除这一行时，它工作得很好：[Authorize(Roles = ActiveDirectory.User)]

我绝对是这个角色的成员，只是当我从前端应用程序进行调用时它无法识别它，就像我从浏览器进行调用时一样。

Answer 1

您的项目是否部署到不同的域？ （http://localhost:8462 和 http://localhost 被认为是不同的域）

如果是，您必须将 withCredentials: true 添加到您的 Angular2 HTTP 后端。

另请参阅：

Answer 2

将此添加到前端应用程序： https://github.com/angular/http/issues/65#issuecomment-181560171

将此添加到 Startup.cs 中的后端应用程序：

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