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

时间:2018-08-27 14:38:07

标签: c# angular asp.net-core cors asp.net-core-webapi

是的,我有不计其数的文章,并重新安排了添加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”标头。因此,不允许访问来源“ http://localhost:62482”。响应的HTTP状态代码为401。

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

我已经在IIS8.5中手动添加了respone标头(部署新代码时,它们会被覆盖)。

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

SWEAR 一次都可以。不确定发生了什么。

当我将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());
    }
}

1 个答案:

答案 0 :(得分:0)

这对我有用: 在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 }
);