2016-07-12 3 views
0

내 서버 쪽은 C# mvc 프로젝트입니다.dev 모드에서 반응하기

우리는 클라이언트 측에 대한 반응을 구현하려고합니다.

나는 express 서버와 hot-reloading를 사용하여, npmnode-js을 사용하고, 그래서 난 내 클라이언트 측 코드를 컴파일 할 때 그것은 http://localhost:3000에서 실행됩니다.

이제 서버 쪽 통화를 추가하고 싶습니다. 이렇게하려면 다른 포트의 localhost에서도 열리는 iis express를 사용하여 c# 코드를 실행하십시오. 이제 문제는 포트 : 3000의 클라이언트 코드가 localhost에있는 iis express로 아약스 호출을 할 때 동일한 도메인 정책으로 인해 "Response for preflight is invalid (redirect)" 오류가 발생한다는 것입니다.

그래서 내가 뭘 잘못하고있다, 당신은 어떻게 당신의 서버와 클라이언트가 분리되어있을 때 dev 모드에서 일한다고 생각합니까? 당신이 그렇게 먼저 클라이언트는 OPTIONS 요청을 보내고, 다른 도메인으로 게시물을 보낼 때 솔루션

-

는 내 ASP.NET

<httpProtocol> 
    <customHeaders> 
    <add name="Access-Control-Allow-Origin" value="*" /> 
    <add name="Access-Control-Allow-Headers" value="Accept, Content-Type, Origin" /> 
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 
    </customHeaders> 
</httpProtocol> 

편집에 추가했습니다. 그래서 솔루션이 코드를 추가 할 수 실제로 : 귀하의 경우에는

protected void Application_BeginRequest(object sender, EventArgs e) 
{ 
    EnableCrossOriginRequestsFromLocalhost(HttpContext.Current.Request); 
} 

private void EnableCrossOriginRequestsFromLocalhost(HttpRequest request) 
{ 
    if (!HttpContext.Current.Request.IsLocal) return; 
    if (request.UrlReferrer == null) return; //can't set Access-Control-Allow-Origin header reliably without a referrer so just return. Referrer should always be set when being called from an app under development because the app under development's URL will be sent as the referrer automatically. 
    var response = HttpContext.Current.Response; 
    response.AddHeader("Access-Control-Allow-Origin", request.UrlReferrer.GetLeftPart(UriPartial.Authority)); 
    response.AddHeader("Access-Control-Allow-Credentials", "true"); 
    if (request.HttpMethod == "OPTIONS") 
    { 
     response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE"); 
     response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept"); 
     response.AddHeader("Access-Control-Max-Age", "1728000"); 
     response.End(); 
    } 
} 
+0

IIS에서 CORS를 허용해야합니다. 'preflight'는 서버가'Allow-Control- *'헤더로 응답해야하는 HTTP OPTIONS 요청입니다. CORS에 대한 훌륭한 소개는 다음과 같습니다. http://www.google.com/intl/ko/tutorials/cors/ – zeronone

+0

@zeronone 제 편집을 보았습니다. 작업을 수행하지 못했지만 요청을 받았지만 게시 할 수 없었습니다. – omriman12

+0

이 링크를 확인하십시오 : http://stackoverflow.com/questions/33645511/why-my-ajax-showing-preflight-is-invalid-redirect-error – zeronone

답변

0

을의 모든 응용 프로그램의 일부 정적 자원으로 귀결 "반작용"응용 프로그램을 부트 스트랩 초기 HTML 파일을의의 .js를 (스크립트 태그, 링크 태그 등을 통해) 초기 html 파일에서 참조되는 .css 파일, 이미지와 같은 기타 고정 애셋을 포함하여 귀하의 React 구성 요소 및 해당 종속성과 함께 제공됩니다.

앱의 C# 부분은 동적 인 요청과 관련이 있습니다. 이는 React가 브라우저에서 앱을 렌더링하는 데 사용할 데이터를 가져 오는 api/ajax 호출에 해당합니다.

Webpack 및 Webpack Dev Server를 사용하고 있다고 가정합니다. 가장 간단한 방법은 Webpack Dev Server가 IISExpress가 실행중인 포트에 대한 모든 api/ajax 요청을 프록시하는 것입니다. 이것은 Webpack.config.js 파일의 간단한 설정입니다 (https://webpack.github.io/docs/webpack-dev-server.html#proxy 참조). 빌드하는 동안 Webpack을 사용하여 번들을 만든 다음 런타임시 웹 서버에서 정적 리소스로 사용하기 만하면됩니다.

Production에서는 IIS가 모든 정보 (정적 요청과 동적 요청)를 처리 할뿐만 아니라 응답하기 전에 React 응용 프로그램을 부트 스트랩하는 html 리소스에 대한 액세스 권한을 부여하므로 익스프레스 서버가 필요하지 않습니다.

관련 문제