AngularJS + ASP.NET 웹 API 도메인 간 문제

내 모바일 앱 개발 학습 프로세스를 진행하면서 교차 원천 요청 공유 또는 CORS라는 새로운 장애물을 발견했습니다.AngularJS + ASP.NET 웹 API 도메인 간 문제

저는 AngularJS + jQuery Mobile (Cordova 전화 클라이언트)과 ASP.NET Web API (백엔드)의 조합을 사용하고 있습니다. 내 문제는 API 컨트롤러에 POST 요청 (또는 다른 유형의 요청)을 완료 할 수 없었기 때문입니다.

내 AngularJS 컨트롤러는 $http.post() 서비스 메소드를 사용하여 웹 API 컨트롤러를 호출합니다. 그러나 Chrome 디버거는 OPTIONS 요청 (CORS 프리 플라이트 요청 일 수도 있음)에서 호출이 실패했다고 말합니다.

다음 게시물에서 CORS 작업 선택기를 구현했습니다 : Enabling CORS in Web API Project. Fiddler에서 api 메소드를 호출하는 것이 어려울지라도 AngularJS는 OPTIONS 프리 플라이트 요청에 계속 실패합니다.

AngularJS 및 도메인 간 통화에 대해 알고 있어야하는 것이 있습니까? 내 처지에 대한 가능한 해결책?

감사합니다.

출처

2012-08-02 Luis Aguilar

[다른 각도 질문 : 옵션] (http://stackoverflow.com/questions/12111936/angularjs-performs-an-options-http-request-for-a-cross-origin-resource) – johlrich

Thinktecture Cors 오브젝트는 코드 (코드)없이 WebApi에서 전체 CORS 지원을받을 수 있습니다.

올바른 CORS 구현으로도 WebDav의 모든 동사를 사용하도록 설정하여 IIS 7에서 실제로 이상한 문제가 발생했습니다 (예, WebDav - 블로그 게시물에 대한 지침을 따라 한 이유를 묻지 마십시오. -디).

는이 작업을 수행 :

열기 IIS 관리자, 응용 프로그램의 처리기 매핑로 이동합니다.
더블은 "동사"탭에서 WebDAV를 핸들러에게
클릭 "요청 제한"
를 클릭 "모든 동사"를 선택합니다.

WebApi가 WebDav를 사용하는 이유는 알 수 없지만 올바른 CORS 구현에도 불구하고 작동하지 않는 POST 및 DELETE 문제를 해결했습니다.

출처

2013-02-18 09:46:12

content-type : application/x-www-form-urlencoded를 사용하여 프리 플라이트 옵션 요청을 건너 뛸 수 있습니다.

AngularJS와 :

var user = { 
    ID: 1, 
    Name: 'test' 
}; 

$http({ 
    url: "api.localhost/api/users/addUser", 
    method: "POST", 
    data: $.param(user), 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
    withCredentials: true, 
    }).success(function (data, status, headers, config) { 
    console.log(data); 
})

웹 API :

[HttpPost] 
public string AddUser(User user) 
{ 
    // Do something 
    return user.Name + " added"; 
}

의 Web.config

<system.webServer> 
     <validation validateIntegratedModeConfiguration="false" /> 
      <handlers> 
       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" /> 
       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" /> 
       <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> 
       <remove name="OPTIONSVerbHandler" /> 
       <remove name="TRACEVerbHandler" /> 

       <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" /> 
       <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" /> 
       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
      </handlers> 
      <httpProtocol> 
       <customHeaders> 
        <add name="Access-Control-Allow-Origin" value="http://localhost" /> 
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Cache-Control" /> 
        <add name="Access-Control-Allow-Credentials" value="true" /> 
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 
       </customHeaders> 
      </httpProtocol> 
     </system.webServer>

출처

2014-02-13 09:39:35 Henke

Microsoft.AspNet.WebApi.Cors 및 web.config 부분 없음 – Samuel

이 ISS에 비틀 거리고있는 동안 AngueJS 1.3 with Microsoft Web API 2 CORS 구성 문제에 대한 간단한 해결책을 찾았습니다.Nuget의 인스톨 한후에에서 먼저

- 마이크로 소프트 WebApi 고르 당신의 WebApiConfig.cs 파일에 다음
```
Install-Package Microsoft.AspNet.WebApi.Cors 
```

: 또한 어디에나 CORS를 활성화 할 수 있습니다

var cors = new System.Web.Http.Cors.EnableCorsAttribute("www.my-angular-web-site.com", "*", "*"); 

config.EnableCors(cors);

* 귀하의 웹 사이트 대신 CORS의 목적에 어긋나고 보안 허점을 열어줍니다. 그러나 테스트를 위해 그것을 할 수 있습니다.

WebApi.Cors 어셈블리를 사용하면 컨트롤러 또는 기타 세부적인 세부 사항으로 컨트롤러를 활성화 할 수 있습니다. 다른 세부 사항은 웹 API 사이트의 here에서 찾을 수 있습니다.

출처

2015-04-16 18:38:54 kmcnamee

config.EnableCors(); 은 이어야합니다. config.EnableCors (cors); – user3484993

@ user3484993 감사합니다. 답변을 업데이트했습니다. – kmcnamee

오하이오, 내 문제가 해결되었습니다. –

AngularJS + ASP.NET 웹 API 도메인 간 문제

답변

관련 문제