AJAX의 ASP.NET MVC 또는 WebAPI 서비스에 대한 크로스 도메인 호출 문제와 해결책

작은 쓰레기 같은 놈들 · 게시됨 2015. 12. 1. 오후 3:20:20

문제 설명

MVC 또는 웹 API ASP.NET 작성된 서비스가 ASP.NET 도메인 간 호출이 이루어지면 접근 불가능해집니다.

번식 방법

템플릿을 사용해 가장 간단한 ASP.NET 웹 API 프로젝트를 만들고, 디버깅해서 작동하는지 확인하세요
HTML 페이지가 하나뿐인 또 다른 프로젝트를 만들고 AJAX 호출을 하세요
이 페이지를 브라우저에서 열면 다음과 같은 오류 (405: 방법 허용되지 않음)을 확인할 수 있습니다.

참고: MVC에서도 같은 상황 ASP.NET 발생합니다. 경우에 따라 MVC는 서비스 개발에도 직접 사용될 수 있으며, 이는 WebAPI에 비해 고유한 장단점이 있습니다. 아래는 MVC를 사용해 개발된 서비스의 예시입니다

원인 분석

크로스 도메인 문제의 근본적인 이유는 브라우저가 두 요청 모두에서 낮은 권한을 가지며, 보통 로컬 도메인 내 자원에 대한 호출만 허용하기 때문입니다. 이는 대상 서버가 명시적으로 크로스 도메인 호출이 허용된다고 알려주지 않는 한 가능합니다.

따라서 교차 도메인 문제는 브라우저의 동작에 의해 발생하지만, 해결책은 서버 측에 있습니다. 모든 클라이언트가 보안을 낮추도록 요구할 수는 없기 때문입니다.

용액

MVC와 ASP.NET 웹 API 프로젝트 유형 모두 ASP.NET 조사를 해본 결과, 다음과 같은 시나리오가 가능하다는 것을 알게 되었습니다.

MVC ASP.NET web.config에 다음 내용만 추가하면 됩니다

ASP.NET 웹 API의 경우, 위 설정 외에 각 API 컨트롤러마다 OPTIONS 메서드를 추가하는 특별한 설계가 필요합니다. 하지만 아무것도 반환하지 않는 방식입니다.

공개 문자열 옵션()

{

null을 반환; 빈 몸체를 사용하는 HTTP 200 응답

}

참고: 이 기능은 약간의 연구를 통해서도 구현할 수 있으며, 필터로 설계하는 것이 더 나을 수 있습니다.

작은 쓰레기 같은 놈들 · 게시됨 2015. 12. 1. 오후 3:39:52

<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>

코드 복사

[WebAPI] AJAX의 ASP.NET MVC 또는 WebAPI 서비스에 대한 크로스 도메인 호출 문제와 해결책