asp.net Web API에서 Cors를 활성화하는 방법은 무엇입니까?

asp.net Web API에서 Cors를 활성화하는 방법은 무엇입니까?

APS.NET Web API에서 CORS를 사용하도록 설정하는 가장 간단한 방법 가이드라고 생각하세요. 이 문서의 모든 단계를 확인하고 지금 자세히 알아보세요.

6min read

다음과 같은 오류가 발생한 적이 있습니까?

교차 출처 요청이 차단되었습니다. 동일 출처 정책은 리소스 읽기를 허용하지 않습니다.

  1. Scheme (HTTP)
  2. Host (server)
  3. Port (8888)

Origin은 Scheme, Host 및 Port 번호로 구성됩니다.

Origin은 Scheme, Host 및 Port 번호로 구성됩니다.

두 리소스의 구성표, 호스트 및 포트 조합이 동일한 경우 동일한 출처로 간주되며, 그렇지 않으면 교차 출처로 간주됩니다.  다음 두 URI를 고려해 보겠습니다

http://abc.com:80와 http://xyz.com:8080는 호스트와 포트가 동일하지 않기 때문에 동일한 출처가 아닙니다. 보안상의 이유로 이 두 URL 간의 리소스 공유가 제한될 수 있습니다. XMLHttpRequest의 예를 들어 CORS를 이해해 보겠습니다. XMLHttpRequest를 사용하여 HTML 문서에서 서버에서 HTTP 작업을 수행합니다. XMLHttpRequest에는 두 개의 URL이 사용됩니다.

  1. 요청된 URL 또는 서버의 URL
  2. 요청을 시작한 문서의 URL입니다

두 URL이 동일한 스킴, 호스트 및 포트를 갖는 경우 XMLHttpRequest 객체는 작업을 수행하지 않고 보안상의 이유로 HTTP 작업을 차단합니다.

서버와 브라우저 모두 CORS를 지원해야 합니다. 기본적으로 모든 최신 브라우저에는 CORS 지원이 있지만 API 개발자는 웹 API에서 CORS 지원을 활성화해야 합니다.

CORS in ASP.NET Web API

여기에서 아래 이미지와 같이 클래스 배열을 반환하는 매우 간단한 ASP.NET Web API를 만들었습니다.

클래스 배열을 반환하는 매우 간단한 ASP.NET Web API를 만들었습니다.

보시다시피 Web API가 포트 8458에서 실행 중입니다.  다음으로, 포트 5901을 사용하여 URI에서 실행되는 JavaScript 애플리케이션에서 데이터를 가져오려고 합니다.

우리는 포트 5901을 사용하여 URI에서 실행되는 JavaScript 응용 프로그램에서 데이터를 가져 오려고합니다.

HTML 문서에서는 XMLHttpRequest 객체를 사용하여 HTTP 호출을 수행합니다. 웹 API의 URI (요청 된 리소스의 URI)와 HTML 문서 (요청이 시작된 URL)가 동일하지 않으므로 XMLHttpRequest 객체는 동일한 출처가 아니기 때문에 리소스 공유를 차단하고 있습니다. 브라우저에서 아래 이미지와 같이 예외가 발생할 가능성이 매우 높습니다.

버그에 대해 더 자세히 알아보겠습니다. 브라우저에서 개발자 도구와 네트워크 탭을 엽니다. 아래 이미지와 같이 Request Header에서 Origin 및 Host를 찾을 수 있습니다. 둘 다 동일하지 않으며 사용자 에이전트 XMLHttpRequest에서 CORS를 허용하지 않는다는 것이 분명합니다.

CORS는 사용자 에이전트 XMLHttpRequest에서 허용되지 않습니다.

응답 헤더를 보면 Access-Control-Allow-Origin에 대한 정보가 없습니다.

응답 헤더를 보면 Access-Control-Allow-Origin에 대한 정보가 없습니다.

서버는 헤더의 리소스에 액세스할 수 있는 원본에 대한 응답을 보내지 않기 때문에 XMLHttpRequest 객체는 브라우저에서 리소스 공유를 차단합니다.  계속해서 Web API에 대한 CORS 지원을 활성화해 보겠습니다.

Enabling CORS in ASP.NET Web API

ASP.NET Web API 2.0에서 CORS를 사용하도록 설정하려면 먼저 Microsoft.AspNet.WebApi.Cors 패키지를 프로젝트에 추가해야 합니다. 아래 이미지와 같이 명령 프롬프트를 선택하여 패키지를 설치하거나 NuGet 관리자를 선택하여 검색하고 설치할 수 있습니다.

ASP.NET Web API 2.0에서 CORS를 사용하도록 설정하려면 먼저 Microsoft.AspNet.WebApi.Cors 패키지를 프로젝트에 추가해야 합니다

다음 세 가지 수준에서 Web API에 대한 CORS 지원을 구성할 수 있습니다.

  1. 글로벌 수준에서
  2. 컨트롤러 레벨에서
  3. 액션 레벨에서

전역 수준에서 CORS 지원을 구성하려면 먼저 CORS 패키지를 설치한 다음 폴더에서 WebApiConfig.cs 파일을 엽니다App_Start.​​

var cors = new EnableCorsAttribute("http://localhost:5901", "*", "*");
config.EnableCors(cors);

전역 수준에서 CORS를 사용하도록 설정한 후 Web API를 다시 호스트하고 요청 및 응답 헤더를 검사합니다. 또한 Enable CORS 속성에서 Origin URL을 JavaScript 앱의 URL로 설정했습니다.

Web API 서버는 아래 이미지와 같이 응답 헤더에 Access-Control-Allow-Origin 헤더를 추가합니다. 응답 헤더의 Access-Control-Allow-Origin 헤더에 있는 URL과 요청 헤더의 Origin 헤더에 있는 URL은 XMLHttpRequest만 CORS 작업을 허용해야 합니다. 경우에 따라 Access-Control-Allow-Origin 응답 헤더의 값이 와일드카드 문자*로 설정됩니다. 즉, 서버는 특정 출처 대신 모든 출처에 대해 CORS 지원을 허용합니다.

Web API server is adding an extra header Access-Control-Allow-Origin

서버에서 CORS 지원을 활성화했으므로 예외가 발생하지 않아야 하며 브라우저에서 데이터를 가져와야 합니다.

앞에서 논의한 것처럼 ASP.NET Web API에서 CORS 지원은 세 가지 수준에서 활성화할 수 있습니다.

  1. 액션 레벨에서
  2. 컨트롤러 레벨에서
  3. 글로벌 수준에서

작업 수준에서 CORS 사용

CORS 지원은 아래 목록에 표시된 대로 작업 수준에서 사용하도록 설정할 수 있습니다.

[EnableCors(origins: "http://localhost:5901", headers: "*", methods: "*")]
public HttpResponseMessage GetItem(int id)
{
   // Code here
}

위의 코드 목록에서는 GetItem 작업에 대해 CORS를 활성화했습니다. 또한 값을 star로 설정하여 모든 헤더를 허용하고 모든 HTTP 메서드를 지원하도록 매개변수를 설정하고 있습니다.

컨트롤러 수준에서 CORS 사용

CORS 지원은 아래 목록과 같이 컨트롤러 수준에서 활성화할 수 있습니다.

[EnableCors(origins: "http://localhost:5901", headers: "*", methods: "*")]
public class ClassesController : ApiController {}

위의 코드 목록에서는 클래스 컨트롤러에 대해 CORS를 활성화했습니다. 또한 값을 star로 설정하여 모든 헤더를 허용하고 모든 HTTP 메서드를 지원하도록 매개 변수를 설정하고 있습니다. [DisableCors] 특성을 사용하여 CORS 지원에서 작업 중 하나를 제외할 수 있습니다.

전역 수준에서 CORS 사용

전역 수준에서 CORS 지원을 구성하려면 먼저 CORS 패키지를 설치한 다음 폴더에서 WebApiConfig.cs 파일을 엽니다 App_Start.

var cors = new EnableCorsAttribute("http://localhost:5901", "*", "*");
config.EnableCors(cors);

둘 이상의 범위에서 특성을 설정하는 경우 우선 순위는 다음과 같습니다.

둘 이상의 범위에서 속성을 설정하고 우선 순위를 지정합니다.

EnableCors의 특성

1.Origins       : 쉼표로 구분된 둘 이상의 Origins 값을 설정할 수 있습니다.  원본이 API에 AJAX 요청을 하도록 하려면 원본 값을 와일드카드 값 star로 설정합니다.

2.       요청 헤더: 요청 헤더 매개변수는 허용되는 요청 헤더를 지정합니다. 헤더를 허용하려면 값을 *로 설정하십시오.

3.HTTP       메소드: methods 매개변수는 리소스에 액세스할 수 있는 HTTP 메소드를 지정합니다. 모든 메서드를 허용하려면 와일드카드 값 "*"를 사용합니다. 그렇지 않으면 쉼표로 구분된 메서드 이름을 설정하여 메서드 집합이 리소스에 액세스할 수 있도록 합니다.

이 모든 것을 종합하면 두 원본, 모든 헤더에 대해 CORS를 사용하도록 설정한 다음 아래 목록과 같이 작업을 게시하고 가져올 수 있습니다.

[EnableCors(origins: "http://localhost:5901,http://localhost:8768", headers: "*", methods: "post,get")]
public class ClassesController : ApiController {}

선택적으로 웹 API에 자격 증명을 전달하고 사용자 지정 정책을 만들 수도 있지만 ASP.NET 웹 API에서 CORS의 기본 사항에 대한이 게시물을 찾았기를 바랍니다. 덧붙일 말이 있으신가요? 아래에 의견을 공유하십시오!

어떻게
데모 요청