.NET Core 2 WebAPI CORS 与 Angular 4 前端和 Windows Auth 的问题

Question

是的，我有无数文章并重新安排了添加 app.UserCors 和其他建议，但仍然卡住了。

将 Visual Studio WebAPI Core 2 与 Angular 2 Web 前端结合使用。

在使用 IIS 8.5 的远程服务器上使用 Windows 身份验证（实际上这在本地也不起作用）。

WebAPI 启动配置：

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<SomeContext>(options => options.UseSqlServer(Configuration.GetConnectionString("SomeDB")));

    //////// ********************
    //////// Setup CORS
    //////// ********************
    var corsBuilder = new CorsPolicyBuilder();
    corsBuilder.AllowAnyHeader();
    corsBuilder.AllowAnyMethod();
    corsBuilder.WithOrigins("*"); 
    corsBuilder.AllowCredentials();

    services.AddCors(options =>
    {
        options.AddPolicy("AllowAll", corsBuilder.Build());
    });

    services.AddMvc();

...


public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseCors("AllowAll"); //<===            

    app.UseMvc();

...

当我在本地运行 WebAPI 或将其部署到远程服务器时，我的 Angular 4 前端会给我：

对于 WebAPI 控制器的调用 - 401（未经授权）（即使在没有设置 [Authorize()] 的控制器上也是如此。

当我尝试使用 Angular 应用程序的本地实例访问远程 WebAPI 时：

请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:62482' 不允许访问。响应的 HTTP 状态代码为 401。

我尝试重新安排启动时添加服务的顺序。

我在 IIS8.5 中手动添加了响应标头（每当我部署新代码时它们都会被覆盖）。

我已经从 WebAPI 应用程序中完全删除了所有 CORS 内容。

我发誓这一切都是一次性的。不知道发生了什么变化。

当我将 WebAPI Core 2 应用程序和 Angular Web 应用程序部署到远程服务器时，我都运行良好，因为来源相同，但这使得本地调试成为不可能。

*** 每个请求的 Angular REPO 代码：

import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { DocumentModel } from '../models/document.model';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/map';
import { map } from 'rxjs/operators/map';
import { IRepository } from './IRepository';
declare var API_URL: string;

@Injectable()
export class DocumentRepository implements IRepository<DocumentModel, number> {
    GetByDocument(key: any): Observable<DocumentModel[]> {
        throw new Error("Method not implemented.");
    }
    private httpService: Http;
    private apiRootUrl: string;

    constructor(http: Http) {
        this.httpService = http;
        this.apiRootUrl = API_URL;
    }

    Create(Model: DocumentModel): Observable<any> {
        throw new Error("Method not implemented.");
    }

    Find(key: any): Observable<DocumentModel[]> {
        return this.httpService.get(this.apiRootUrl +'documents/mine').map(result => result.json());
    }

    Get(id: any): Observable<DocumentModel> {
        return this.httpService.get(this.apiRootUrl +'documents/' + id).map(result => result.json());
    }
}

Answer 1

这对我有用： 在 Startup.cs 中

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        app.UseAuthentication();

        //app.UseHttpsRedirection();
        app.UseCors(
            options => options.AllowAnyOrigin().AllowAnyHeader()
                                               .AllowAnyMethod()
                                               .AllowCredentials()
        );
        app.UseMvc();
    }

仅此而已，Cors 没有其他提及。

我使用 JWT Bearer Token 并且 [Authorize] 按预期工作。

您可以先尝试使用 Postman，看看您的端点是否正常工作，然后开始制作 Angular http.get()

这是角部分

const headers = new HttpHeaders().
                    set('Accept', 'application/json')

const url = 'http://localhost:5000/api/'  

return this.http.get(
   url + 'endpoint',
   { headers: headers }
);