ASP.NET Core CORS WebAPI: không có Access-Control-Allow-Origin header

Question

Tôi đã triển khai API ASP.NET Core web của mình lên Azure và tôi có thể truy cập điểm cuối bằng Swagger hoặc trình gỡ lỗi web như Fiddler. Trong cả hai trường hợp (cùng nguồn gốc trong Swagger, nguồn gốc khác nhau sử dụng Fiddler từ máy tính của tôi), khi truy cập vào API tôi nhận được kết quả mong đợi, với CORS kích hoạt như sau trong Startup.cs tôi:

1. thêm services.AddCors();-ConfigureServices.

2. thêm phần mềm trung gian vào Configure: Tôi biết thứ tự ở đây quan trọng (ASP.NET 5: Access-Control-Allow-Origin in response), vì vậy tôi đặt cuộc gọi này ở đầu phương thức, chỉ trước bằng cách ghi nhật ký hoặc phần mềm trung gian chẩn đoán; đây là phương pháp đầy đủ của tôi:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
    ILoggerFactory loggerFactory, 
    IDatabaseInitializer databaseInitializer) 
{ 
    loggerFactory.AddConsole(Configuration.GetSection("Logging")); 
    loggerFactory.AddDebug(); 
    loggerFactory.AddNLog(); 

    // to serve up index.html 
    app.UseDefaultFiles(); 
    app.UseStaticFiles(); 

    // http://www.talkingdotnet.com/aspnet-core-diagnostics-middleware-error-handling/ 
    app.UseDeveloperExceptionPage(); 
    app.UseDatabaseErrorPage(); 

    // CORS 
    // https://docs.asp.net/en/latest/security/cors.html 
    app.UseCors(builder => 
      builder.WithOrigins("http://localhost:4200", "http://www.myclientserver.com") 
       .AllowAnyHeader() 
       .AllowAnyMethod()); 

    app.UseOAuthValidation(); 
    app.UseOpenIddict(); 
    app.UseMvc(); 

    databaseInitializer.Seed().GetAwaiter().GetResult(); 
    env.ConfigureNLog("nlog.config"); 

    // swagger 
    app.UseSwagger(); 
    app.UseSwaggerUi(); 
} 

Các localhost CORS được sử dụng trong quá trình phát triển, và đề cập đến một ứng dụng Angular2 CLI. CORS hoạt động tốt tại địa phương và ứng dụng khách và API của tôi nằm trên các cổng khác nhau trên cùng một máy chủ cục bộ, vì vậy đây là nguồn gốc thực sự (tôi nhận xét điều này vì những gợi ý mà tôi tìm thấy ở đây: https://weblog.west-wind.com/posts/2016/Sep/26/ASPNET-Core-and-CORS-Gotchas: tác giả của bài đăng thông báo rằng tiêu đề CORS trong phản hồi được gửi chỉ khi thực sự bắt buộc, ví dụ: trong môi trường có nguồn gốc thực sự).

Sử dụng Fiddler Tôi có thể truy cập thành công API từ xa, nhưng tôi nhận được tiêu đề NO Access-Control-Allow-Origin. Do đó, khi gọi API từ trình duyệt (thông qua ứng dụng khách hàng của tôi) yêu cầu AJAX thất bại, ngay cả khi máy chủ trả về 200. Mẫu Fiddler yêu cầu (thành công):

GET http://mywebapisiteurl/api/values HTTP/1.1 
User-Agent: Fiddler 

phản ứng:

HTTP/1.1 200 OK 
Transfer-Encoding: chunked 
Content-Type: application/json; charset=utf-8 
Server: Microsoft-IIS/8.0 
X-Powered-By: ASP.NET 
Set-Cookie: ARRAffinity=3d551180c72208c1d997584c2b6119cf44e3a55c868f05ffc9258d25a58e95b1;Path=/;Domain=prinapi.azurewebsites.net 
Date: Thu, 01 Dec 2016 10:30:19 GMT 

["value1","value2"] 

khi cố gắng để truy cập API từ xa được triển khai trên Azure, ứng dụng khách hàng của tôi luôn thất bại trong yêu cầu AJAX với lỗi:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.myclientserver.com' is therefore not allowed access. 

đây là một mã khách hàng mẫu sử dụng Angular2 (sử dụng Plunker):

import {Component, NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import { Http, Headers, Response } from '@angular/http'; 
import { HttpModule } from '@angular/http'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <button (click)="test()">test</button> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor(private _http: Http) { 
    this.name = 'Angular2' 
    } 
    public test() { 
    this._http.get('http://theapisiteurlhere/api/values', 
    { 
     headers: new Headers({ 
      'Content-Type': 'application/json' 
     }) 
    }) 
    .subscribe(
     (data: any) => { 
     console.log(data); 
     }, 
     error => { 
     console.log(error); 
     }); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, HttpModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Tổng hợp, có vẻ như máy chủ API ASPNET không trả về các tiêu đề CORS được mong đợi và do đó trình khách dựa trên trình duyệt của tôi được lưu trữ trên một nguồn gốc khác không thành công. Tuy nhiên, các thiết lập CORS có vẻ là OK, ít nhất là đánh giá từ các tài liệu được trích dẫn ở trên; Tôi đang ở trong môi trường có nguồn gốc thực sự; và tôi đang đặt phần mềm trung gian trước những người khác. Có lẽ tôi đang thiếu một cái gì đó hiển nhiên, nhưng googling xung quanh đây là tất cả các khuyến nghị tôi tìm thấy. Bất kỳ gợi ý nào?

CẬP NHẬT

Trong thư trả lời để @Daniel JG: yêu cầu/phản hồi từ cáy thành công:

GET http://theapiserver/api/values HTTP/1.1 
User-Agent: Fiddler 
Host: theapiserver 
Origin: http://theappserver/apps/prin 

và:

HTTP/1.1 200 OK 
Content-Type: application/json; charset=utf-8 
Server: Microsoft-IIS/8.0 
Access-Control-Allow-Origin: http://theappserver/apps/prin 
X-Powered-By: ASP.NET 
Set-Cookie: ARRAffinity=3d551180c72208c1d997584c2b6119cf44e3a55c868f05ffc9258d25a58e95b1;Path=/;Domain=theapiserver 
Date: Thu, 01 Dec 2016 14:15:21 GMT 
Content-Length: 19 

["value1","value2"] 

Yêu cầu/phản hồi từ Angular2 (Plunker) thay vì thất bại, như đã báo cáo.Bằng cách kiểm tra lưu lượng truy cập mạng, tôi chỉ có thể xem yêu cầu preflight:

OPTIONS http://theapiserver/api/values HTTP/1.1 
Host: theapiserver 
Proxy-Connection: keep-alive 
Access-Control-Request-Method: GET 
Origin: http://run.plnkr.co 
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36 
Access-Control-Request-Headers: content-type 
Accept: */* 
Referer: http://run.plnkr.co/h17wYofXGFuTy2Oh/ 
Accept-Encoding: gzip, deflate, sdch 
Accept-Language: en-US,en;q=0.8,it;q=0.6 

HTTP/1.1 204 No Content 
Server: Microsoft-IIS/8.0 
X-Powered-By: ASP.NET 
Set-Cookie: ARRAffinity=3d551180c72208c1d997584c2b6119cf44e3a55c868f05ffc9258d25a58e95b1;Path=/;Domain=theapiserver 
Date: Thu, 01 Dec 2016 14:23:02 GMT 

Sau đó, yêu cầu không thành công và không có lưu lượng truy cập đến máy chủ. Vấn đề báo cáo là Response to preflight request doesn't pass access control check, một lần nữa vì thiếu các tiêu đề trong phản ứng:

XMLHttpRequest cannot load http://theapiserver/api/values. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access. 

Answer 1

Thêm phương pháp .AllowAnyOrigin() có thể khắc phục vấn đề của bạn

app.UseCors(builder => 
     builder.WithOrigins("http://localhost:4200", "http://www.myclientserver.com") 
      .AllowAnyOrigin() 
      .AllowAnyHeader() 
      .AllowAnyMethod()); 

Answer 2

WebAPI Dự án ---> Right Nhấp vào Tài liệu tham khảo ---> Tìm kiếm trong phần Quản lý gói phần mềm Nuget. Thêm Microsoft.AspNet.WebApi.Cors vào dự án bằng cách cài đặt

Thêm mã sau vào tệp WebApi.Config trong thư mục App_Start trong dự án.

var cors = mới EnableCorsAttribute ("", "", "*"); config.EnableCors (cors);

enter image description here

enter image description here