ปัญหา .NET Core 2 WebAPI CORS กับส่วนหน้า Angular 4 และ Windows Auth

ใช่ ฉันมีบทความนับไม่ถ้วนและจัดเรียงแอปใหม่ UserCors และคำแนะนำอื่นๆ แต่ฉันยังคงติดอยู่

การใช้ Visual Studio WebAPI Core 2 กับส่วนหน้าของเว็บ Angular 2

การใช้การรับรองความถูกต้องของ Windows บนเซิร์ฟเวอร์ระยะไกลโดยใช้ IIS 8.5 (อันที่จริงสิ่งนี้ใช้ไม่ได้ในเครื่องเช่นกัน)

คอนฟิกการเริ่มต้น 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 ภายในเครื่องหรือปรับใช้กับเซิร์ฟเวอร์ระยะไกล ส่วนหน้า My Angular 4 จะให้ฉัน:

สำหรับการเรียกไปยังตัวควบคุม WebAPI - 401 (ไม่ได้รับอนุญาต) (แม้แต่บนตัวควบคุมที่ไม่มีการตั้งค่า [Authorize()] ก็ตาม

เมื่อฉันพยายามใช้อินสแตนซ์ในเครื่องของแอป Angular เพื่อเข้าถึง WebAPI ระยะไกล:

ไม่มีส่วนหัว 'Access-Control-Allow-Origin' บนทรัพยากรที่ร้องขอ Origin 'http://localhost:62482' จึงไม่ได้รับอนุญาตให้เข้าถึง การตอบสนองมีรหัสสถานะ HTTP 401

ฉันได้ลองจัดลำดับการเพิ่มบริการใหม่เมื่อเริ่มต้นระบบแล้ว

ฉันได้เพิ่มส่วนหัวการตอบกลับใน IIS8.5 ด้วยตนเอง (จะถูกเขียนทับทุกครั้งที่ฉันปรับใช้โค้ดใหม่)

ฉันได้ลบเนื้อหา CORS ทั้งหมดออกจากแอป WebAPI แล้ว

ฉัน สาบาน ทั้งหมดนี้ได้ผลในคราวเดียว ไม่แน่ใจว่ามีอะไรเปลี่ยนแปลง

ฉันทำงานได้ดีเมื่อฉันปรับใช้ทั้งแอป WebAPI Core 2 และเว็บแอป 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());
    }
}


person user3637002    schedule 27.08.2018    source แหล่งที่มา
comment
.net core api ของคุณได้รับการให้บริการบนพอร์ตเดียวกันเสมอหรือไม่เช่น ..62482 คุณสามารถลองเพิ่มสิ่งนี้ในฟังก์ชันกำหนดค่าของคุณ app.UseCors(builder => builder.WithOrigins("http://localhost") .AllowAnyHeader() ); และโพสต์การตั้งค่าเชิงมุมของคุณด้วย ... @ user3637002   -  person Vaibhav Kumar Goyal    schedule 27.08.2018
comment
โปรดแสดงรหัส Angular 2 ที่ทำการเรียก API (รวมถึงส่วนหัว / การตั้งค่า CORS)   -  person Peter B    schedule 27.08.2018
comment
เปลี่ยน WithOrigins("*") เป็น AllowAnyOrigin และลองเพิ่มลงในคอนโทรลเลอร์ของคุณด้วยตนเองเพื่อทดสอบด้วยแอตทริบิวต์ [EnableCors("AllowAll")]   -  person penleychan    schedule 27.08.2018
comment
››เปลี่ยน WithOrigins(*) เป็น AllowAnyOrigin และลองเพิ่มมันลงในคอนโทรลเลอร์ของคุณด้วยตนเองเพื่อทดสอบด้วยแอตทริบิวต์ [EnableCors(AllowAll)]>> พยายามทั้งหมดแล้ว... ไม่มีลูกเต๋า   -  person user3637002    schedule 27.08.2018


คำตอบ (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 และ [อนุญาต] ทำงานตามที่ตั้งใจไว้

คุณสามารถลองใช้ 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 }
);  
person wFitz    schedule 27.08.2018
comment
ฉันจำเป็นต้องมีการตรวจสอบสิทธิ์ในแอป Angular เลยหรือไม่ API ใช้การรับรองความถูกต้องของ Windows และดูเหมือนว่าจะทำงานได้ดีบนเซิร์ฟเวอร์ในการตรวจจับข้อมูลประจำตัวของผู้ใช้ ฉันประสบปัญหาเหล่านี้เมื่อทำงานภายในเครื่องและพยายามเข้าถึงเซิร์ฟเวอร์ระยะไกลเท่านั้น - person user3637002; 27.08.2018
comment
โปรดทราบว่า SWAGGER เสมอ ใช้งานได้เมื่อฉันใช้เพื่อทดสอบ API นี่ดูเหมือนจะเป็นปัญหาแอปพลิเคชันเว็บเชิงมุม - person user3637002; 27.08.2018