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

Posted 2023-03-04

【中文标题】.NET Core 2 WebAPI CORS 与 Angular 4 前端和 Windows Auth 的问题

【英文标题】：.NET Core 2 WebAPI CORS problems with Angular 4 front end and Windows Auth

【发布时间】：2019-02-02 03:08:50

【问题描述】：

是的，我有无数文章并重新安排了添加 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());
    

【问题讨论】：

您的 .net 核心 API 是否总是在同一个端口上提供服务，即 ..62482 也可以尝试在您的配置函数中添加它app.UseCors(builder => builder.WithOrigins("http://localhost") .AllowAnyHeader() ); 并发布您的角度设置... @user3637002

请同时显示进行 API 调用的 Angular 2 代码（包括 CORS 标头/设置）。

将WithOrigins("*") 更改为AllowAnyOrigin。并尝试手动将其添加到您的控制器以使用属性 [EnableCors("AllowAll")]

对其进行测试

>>将 WithOrigins("*") 更改为 AllowAnyOrigin。并尝试手动将其添加到您的控制器以使用属性 [EnableCors("AllowAll")]>> 尝试所有这些...没有骰子。

【参考方案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 
);  

【讨论】：

我的 Angular 应用程序中是否需要任何身份验证？该 API 使用 Windows 身份验证，并且在服务器上似乎可以正常工作以检测用户身份。只有在本地运行并尝试访问远程服务器时，我才会遇到这些问题。

FYI SWAGGER always 在我使用它来测试 API 时有效。这似乎是一个有角度的网络应用程序问题。