Angular 4前端和Windows Auth的.NET Core 2 WebAPI CORS問題

Question

是的，我有無數的文章，並重新安排了添加app.UserCors和其他建議，但仍然陷於困境。

將Visual Studio WebAPI Core 2與Angular 2 Web前端一起使用。

在使用IIS 8.5的遠程服務器上使用Windows身份驗證（實際上這在本地也不起作用）。

WebAPI啟動conf：

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或將其部署到遠程服務器時，My Angular 4前端為我提供：

對於對WebAPI控制器的調用-401 （未經授權） （即使在未設置[Authorize()]控制器上也是如此[Authorize()] 。

當我嘗試使用Angular應用程序的本地實例訪問遠程WebAPI時：

所請求的資源上沒有“ Access-Control-Allow-Origin”標頭。 因此，不允許訪問源' http：// localhost：62482 '。 響應的HTTP狀態碼為401。

我試過重新安排啟動時添加服務的順序。

我已經在IIS8.5中手動添加了respone標頭（在部署新代碼時，它們將被覆蓋）。

我已經從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令牌，並且[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 }
);