ASP.NET Core CORS WebAPI: 액세스 제어-원산지 허용 헤더 없음

ASP.NET Core CORS WebAPI: 액세스 제어-원산지 허용 헤더 없음

ASP를 배포했습니다.NET Core 웹 API to Azure, 그리고 저는 Swagger나 Fiddler와 같은 웹 디버거를 사용하여 엔드포인트에 액세스할 수 있습니다.두 경우 모두(스웨거에서 동일한 기원, 내 컴퓨터에서 Fiddler를 사용하여 다른 기원) API에 액세스할 때 다음과 같이 CORS가 활성화된 예상 결과를 얻습니다.Startup.cs:

1. 더하다services.AddCors();로.ConfigureServices.

2. 에 미들웨어 추가Configure여기 주문이 중요하다는 것을 알고 있습니다(ASP).NET 5: 액세스-제어-출발 허용(응답 시)을 사용하여 이 호출을 메소드의 맨 위에 놓았습니다. 이 호출은 로깅 또는 진단 미들웨어 앞에만 나옵니다. 다음은 제 전체 메소드입니다.

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

그localhostCORS는 개발 중에 사용되며 Angular2 CLI 앱을 말합니다. CORS는 로컬에서 잘 작동하고 있으며 클라이언트와 API 앱은 동일한 로컬 호스트의 서로 다른 포트에 있으므로 이는 "참" 크로스 오리진입니다(여기서 찾은 제안 때문에 이를 알려드립니다: https://weblog.서풍).com/posts/2016/9/26/ASPNET-Core-and-CORS-Gotchas: 게시물 작성자는 응답의 CORS 헤더가 실제로 필요할 때만 전송된다는 것을 알게 됩니다. 즉, 실제 교차 출처 환경에서).

Fiddler를 사용하여 원격 API에 성공적으로 액세스할 수 있지만 NO가 표시됩니다.Access-Control-Allow-Origin표제의따라서 브라우저에서 (내 클라이언트 앱을 통해) API를 호출할 때 서버가 200을 반환하더라도 AJAX 요청은 실패합니다.샘플 Fiddler 요청(성공):

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

응답:

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"]

Azure에 배포된 원격 API에 액세스하려고 하면 클라이언트 앱이 항상 AJAX 요청을 실패하고 다음 오류가 발생합니다.

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

다음은 Angular2(플런커 사용)를 사용한 샘플 클라이언트 코드입니다.

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 {}

요약하면 ASPNET API 서버가 예상된 CORS 헤더를 반환하지 않아 다른 오리진에서 호스팅되는 브라우저 기반 클라이언트에서 오류가 발생합니다.하지만 적어도 위에 인용된 문서를 보면, CORS 설정은 괜찮은 것 같습니다. 저는 진정한 교차 출처 환경에 있습니다. 그리고 저는 미들웨어를 다른 제품보다 먼저 배치하고 있습니다.제가 뭔가 분명한 것을 놓쳤을 수도 있지만, 이것들을 검색하는 것이 제가 찾은 추천 사항의 전부입니다.힌트?

갱신하다

@Daniel J.에 대한 답변.G: 피들러의 요청/응답이 성공적입니다.

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

그리고:

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"]

보고된 대로 Angular2(플렁커)의 요청/응답이 대신 실패합니다.네트워크 트래픽을 검사하면 사전 비행 요청만 볼 수 있습니다.

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

이 후에는 요청이 실패하고 더 이상 트래픽이 서버로 전송되지 않습니다.는 보된문제입니다.Response to preflight request doesn't pass access control check응답에 헤더가 없기 때문입니다.

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.

다음은 댓글에서 복사한 저의 질문에 대한 답변입니다.나는 애저 포털에 CORS 섹션이 있다는 것을 알아차리지 못했습니다.허용된 오리진을 입력하지 않으면 코드 기반 구성이 전혀 관련이 없는 것 같습니다.여기서 URL을 복제해야 하기 때문에 이상하게 보이지만, 일단 추가하면*거기서 허용된 기원까지 그것은 효과가 있었습니다.

를 추가합니다.AllowAnyHeader() 메서드는 문제를 해결할 수 있습니다.

app.UseCors(builder => builder.WithOrigins("http://localhost:4200")
                              .AllowAnyMethod()
                              .AllowAnyHeader());

저도 비슷한 오류에 직면했지만, 파이프라인을 정상적으로 유지함으로써 오류가 해결되었습니다.(startup.cs -> 서비스 구성)와 같은

  app.UseRouting();
  app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
  app.UseEndpoints(endpoints => .....

오류 메시지는 매우 오해의 소지가 있습니다.DbContext에 새 테이블을 추가하려고 했는데 동일한 오류가 발생했습니다.Angular는 "Access-Control-Allow-Origin" 오류를 제공하지 않았지만, Postman은 500개의 내부 서버 오류를 제공했습니다._userManager를 호출하는 동안 Login 메서드가 실패했습니다.전자 메일 동기화()를 사용하여 찾습니다.이것이 다른 사람에게 도움이 되기를 바랍니다.

WebApi Project ---> References ---> Manage Nuget Packages 섹션에서 Search Core를 마우스 오른쪽 단추로 클릭합니다.Microsoft 추가.AsNet.WebApi.설치를 통해 프로젝트에 대한 코르스

다음 코드를 WebApi에 추가합니다.프로젝트의 App_Start 폴더 아래에 있는 구성 파일입니다.

var cors = 새 EnableCorsAttribute(","","*"); 구성.EnableCors(코어스);

여기에 이미지 설명 입력

여기에 이미지 설명 입력

언급URL : https://stackoverflow.com/questions/40908949/asp-net-core-cors-webapi-no-access-control-allow-origin-header