Angular 2를 사용하여 POST에서 ASP.NET MVC 4에서 교차 출처 요청을 사용하는 방법

Question

저는 CORS로 POST 요청을하는 데 실제로 고심하고 있습니다.

나는 실제로 내 컨트롤러

using System; 
using System.Web.Mvc; 

public class AllowCrossSiteAttribute : ActionFilterAttribute 
{ 
    public override void OnActionExecuting(ActionExecutingContext filterContext) 
    { 
     filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200"); 
     filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "*"); 
     filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Credentials", "true"); 

     base.OnActionExecuting(filterContext); 
    } 
} 

내부에 내 방법에 올바른 응답 헤더를 추가하는 클래스를했습니다 나는이

[AllowCrossSite] 
public ActionResult GetReportParameters(string IdRapport) 

처럼 사용하고 난은 예상 된 결과를 얻을 수

하지만 문제는이 특정 콘텐츠 형식을 전달하기 위해 사용자 지정 헤더가있는 POST 요청을하려고 할 때입니다.

'Content-Type': 'application/json; charset=utf-8' 

실제로이 응답을

은 그래서 아무것도처럼 헤더

받고 있어요 것은 내가 제대로 내 속성 클래스에 갈거야 경우에도 헤더에 대해 이루어집니다. 여기

는 우편 배달, 모든 일의 여행이 제대로 나는 아니오 컨트롤러 내부의 방법에서 내 매개 변수에 액세스 할 수 있습니다 선언하는 문제가 없습니다 사용하여 각도 2 서비스

const headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8' }); 
const options = new RequestOptions({ headers: headers , withCredentials: true }); 

const mock = { 
    name: 'TitreRegroupement1', 
    visible: false, 
    type: 'System.String', 
    value: 'Test' 
}; 

// tslint:disable-next-line:max-line-length 
const body = JSON.stringify({ idRapport: '00392024-d171-4f39-9c5c-97a51f53fd54', filtre: '', exportFormat: '', parameters: data }); 

return this.http.post('http://localhost:8080/ReportingViewer/ExportReport', body, options) 
    .map((response: Response) => { 
     return this.extractSingleData(response, Parameters); 
    }) 
    .catch(this.handleError); 
} 

내 전면입니다 문제.

일부 신체가 나를 이해할 수있는 몇 가지 팁을 줄 수 있다면 나는 그들을 듣기 좋다! :)

Answer 1

두 분 모두에게 감사드립니다. 마침내 어떻게 작동시키는 지 발견했습니다.

먼저 나는 나에게 sideshowbarker

if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OridinalIgnoreCase) && 
    Request.HttpMethod == "OPTIONS") { 
    Response.Flush(); 
} 

을 제안하고 내가, 내가 뭐하고 있었 내 헤더에 뭔가 누락 된 것을 적용 "*"모든 방법이 있지만, 결국 이러한 매개 변수로는

근무 여기 내 클래스의 최종 형태에 의해 interessed 사람들을위한

filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 

그것은

입니다

using System; 
using System.Web; 
using System.Web.Mvc; 

namespace Via.Client.WebMvc 
{ 
    public class AllowCrossSiteAttribute : System.Web.Mvc.ActionFilterAttribute 
    { 
     public override void OnActionExecuting(ActionExecutingContext filterContext) 
     { 
      HttpContext ctx = System.Web.HttpContext.Current; 

      filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200"); 
      filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
      filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Credentials", "true"); 

      if (filterContext.HttpContext.Request.HttpMethod == "OPTIONS") 
      { 
       filterContext.HttpContext.Response.Flush(); 
      } 

      base.OnActionExecuting(filterContext); 
     } 
    } 
} 

Answer 2

시도한 코드가 모두 좋습니다. 이것은 작동해야하지만 귀하의 경우에는 이것이 작동하지 않습니다.

나는 코드가 CORS 프리 플라이트 OPTIONS 요청을 할 수있는 브라우저를 트리거링 자바 스크립트

Setting Access-Control-Allow-Origin in ASP.Net MVC - simplest possible method

Answer 3

귀하의 프론트 엔드를 체크 아웃 당신이 그것에 대해 당신에 대한 참조가 있습니다.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

당신은 예를 들어, 추가하여, 그 OPTIONS 요청을 처리하기 위해 서버 측 코드를 변경해야 다른 많은 관련 답변을

if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OridinalIgnoreCase) && 
    Request.HttpMethod == "OPTIONS") { 
    Response.Flush(); 
} 

또는 참조 https://stackoverflow.com/search?q=%5Basp.net-mvc%5D+%5Bcors%5D+options을.