ASP.NET Core 에서 HTML 5 클 라 이언 트 경로 가 되 돌아 오 는 문 제 를 어떻게 처리 합 니까?

머리말
Angular,React,Vue 등 응용 프로그램 프레임 워 크 로 구 축 된 클 라 이언 트 응용 프로그램 을 사용 할 때 항상 HTML 5 클 라 이언 트 경 로 를 처리 합 니 다.브 라 우 저 에서 페이지 와 구성 요소 의 클 라 이언 트 경 로 를 완전히 처리 합 니 다.거의 브 라 우 저 에서...
HTML 5 클 라 이언 트 루트 는 클 라 이언 트 에서 잘 작 동 하지만 한 사이트 에 깊이 연결 되 거나 브 라 우 저 에서 새로 고침 을 누 르 면 클 라 이언 트 루트 에 악습 이 생 겨 서버 HTTP 요청 이 됩 니 다.서버 경로 가 설정 되 지 않 았 을 수도 있 습 니 다.
이 글 에서 나 는 ASP.NET Core(또는 간접 ASP.NET 응용 프로그램)가 클 라 이언 트 응용 프로그램 을 그 경로 에 효과적으로 연결 하여 이러한'가짜'요청 을 처리 하 는 방법 에 대해 토론 할 것 이다.다음은 더 이상 할 말 이 없 으 니 편집장 님 을 따라 상세 한 소 개 를 해 보 겠 습 니 다.
Html 5 클 라 이언 트 경로?
HTML 5 클 라 이언 트 의 경로 가 무엇 인지 모른다 면 빠르게 되 돌아 보 세 요.
클 라 이언 트 프레임 워 크 는 서버 응용 프로그램-페이지 나 구성 요소 사이 에서 내 비게 이 션 을 할 수 있 도록 클 라 이언 트 경로 체 제 를 실현 합 니 다.
Angular 는 몇 가지 경로 유형 을 지원 합 니 다.

해시 노선(http://localhost:4200/#1!/albums 또는 http://localhost:4200/#/albums)

HTML 5 노선(http://localhost:4200/albums)

#!/ 하 시 본드 노선
전 자 는 HTTP 의미 와 직접 작업 하 는 빠 른 방법 입 니 다.a 가 있 는 URL\#클 라 이언 트 가 실행 되 고 페이지 로 이동 하 는'로 컬'URL 을 지정 합 니 다.프레임 워 크 는 내 비게 이 션 을 차단 하고 따라 가 는 URL 내용 을 검사 할 수 있 습 니 다.산열 폭발\#!응용 프로그램의 URL 과 일반\#닻 링크 를 구분 하 는 데 사용 합 니 다.
산열 폭발 노선 의 장점 은 그들 이 단지 일 을 할 뿐 이라는 것 이다.서버 에서 피 가 나 는 경로 가 없습니다.책 갈피 나 클 라 이언 트 페이지 를 새로 고치 면 예상 한 대로 작 동 합 니 다.해시 논 리 는 브 라 우 저 에서 로 컬 URL 분석의 일부분 으로 실행 되 기 때 문 입 니 다.간단 하 죠?그것 은 단지 일 일 뿐이다.
그러나 단점 은 인터넷 주 소 를 수 동 으로 입력 해 야 한다 면 이 사이트 들 은 매우 보기 싫 고 직관 적 이지 않다 는 것 이다.산열 폭발 노선 에 대해 말하자면 이것 은 결코 좋 은 논거 가 아니 지만,그것들 이 HTML 5 루트 에 불리 하 든 상관없다.
해시 가 Angular 에 있 는 Bang 경로.
Angular 는 기본 HTML 5 클 라 이언 트 루트 를 사용 하지만,간단 한 스위치 로 Hashbang 루트 를 사용 합 니 다.HTML 5 루트 가 아 닌:

// in app.module.tsproviders : [ .. // make sure you use this for Hash Urls rather than HTML 5 routing { provide: LocationStrategy, useClass: HashLocationStrategy },]

routerLink 가 HTML 템 플 릿 에서 링크 주 소 를 사용 하고router.navigate()코드 링크 에서 사용 하면 Angular 교환 기 는 자동 으로 두 가지 모드 사이 에서 전환 합 니 다.

HTML 에서 사용 하기<a routerLink="/albums" />링크

코드 에서 사용:router.navigate(["/album",album.id])

HTML 5 경로
HTML 5 루트 는 더 복잡 한 방법 을 사용 합 니 다.-클 라 이언 트 의 루트 를 제어 하고 주소 표시 줄 을 관리 하기 위해 HTML 5 의 Pushstate API 를 사용 합 니 다.
이러한 방법의 장점 은 HTML 5 API 를 사용 하면 상대 적 으로 조작 하기 쉽 고 표준적 인 무 연장 루트 약정 을 사용 하 며 웹 응용 프로그램 과 API 를 사용 할 때 URL 이 더욱 간결 하고 제어 하기 쉽다 는 것 이다.
그러나 HTML 5 루트 는 서버 의 명확 한 지원 을 통 해 어떤 루트 가 서버 루트 이 고 어떤 루트 가 고객 루트 인지 정확하게 이해 해 야 한다.
서버 에서 처리 되 지 않 은 HTML 5 경로 문제
문 제 는 HTML 5 클 라 이언 트 경로 와 서버 경로 가 구분 되 지 않 는 다 는 점 이다.
http://localhost:4200/albums클 라 이언 트 URL 을 서버 쪽 URL 로 쉽게 사용 할 수 있 습 니 다.클 라 이언 트 에서 완전히 내 비게 이 션 을 할 때 HTML 5 노선 이 정상적으로 작 동 합 니 다.-응용 프로그램 은 내 비게 이 션 을 차단 하고 특정 노선 을 활성화 할 때 해당 하 는 클 라 이언 트 페이지 로 이동 할 수 있 습 니 다.
클 라 이언 트 가 구동 하 는 프로그램 에 심층 링크 를 사용 한 다음 에 이 페이지 의 책 갈 피 를 책 갈피 로 한 다음 에 이 URL 내 비게 이 션 을 사용 하여 이 페이지 로 돌아 가 거나 현재 활동 페이지 를 새로 고치 면 문제 가 발생 합 니 다.이 두 가지 상황 에서 브 라 우 저가 루트 를 요청 할 때 클 라 이언 트 프로그램 이 실행 되 지 않 기 때문에 브 라 우 저가 서버 에 루트 URL 을 요청 합 니 다.그러나 기본적으로/albums 노선 을 설정 하지 않 기 때문에 오 류 를 얻 을 수 있 습 니 다.
ASP.NET Core 프로그램 에서 HTML 5 경로 설정 을 특별한 처리 하지 않 으 면 프로그램 에서 오류 페이지 를 열거 나 Kestrel 에서 이 기본 디 스 플레이 를 선택 합 니 다.

그림 1-처리 되 지 않 은 클 라 이언 트 경로 에 서버 오류 가 발생 합 니 다.
서버 의 클 라 이언 트 경로 복구
그렇다면 당신 은 이 문 제 를 어떻게 해결 합 니까?
클 라 이언 트 SPA 프로그램 은 보통 프로그램 을 시작 하 는 정적 페이지 가 하나 또는 몇 개 있 습 니 다.전형 적 인 Angular 응용 프로그램 에 대해 이 페이지 는 index.html 로 응용 프로그램 을 시작 하고 클 라 이언 트 경 로 를 시작 합 니 다.대부분의 프레임 워 크 는 시작 할 때 현재 경 로 를 확인 하고 요청 한 경로 로 이동 할 수 있 습 니 다.
클 라 이언 트 경로 가 책 갈피,링크 또는 서버 에 완전히 새로 고침 되면 index.html 를 제공 하고 원본 URL 이 변 하지 않 습 니 다.
그 다음 에 클 라 이언 트 응용 프로그램 은 스스로 안내 하고 내부 경로 가 시 작 됩 니 다.책 갈피/새로 고침 위 치 를 되 돌려 주 기 를 바 랍 니 다.
서버 에서 Index.html 제공
이 작업 을 위해 서 는 서버 가 담당 하 는 내용 만 제공 하도록 확보 해 야 한다.
이 점 을 할 수 있 는 몇 가지 방법 이 있다.

호스트 서버 URL 재 작성

ASP.NET Core 응용 프로그램의 클 라 이언 트 경로 처리

호스트 웹 서버 의 URL 재 작성
주류 웹 서버 에서 ASP.NET Core(또는 ASP.NET)프로그램 을 실행 하면 가장 간단 하고 효과 적 인 해결 방안 은 클 라 이언 트 URL 을 다시 쓰 고 index.html 가 지정 한 URL 에 내용 을 제공 하 는 것 입 니 다.
IIS 에 서 는 IIS 재 작성 모듈 을 사용 하여 이 작업 을 수행 할 수 있 습 니 다.나 는 최근 에 한 편의 박문 에서 이 점 을 더욱 상세 하 게 소개 했다.

ASP.NET 핵심 프로그램의 IIS 재 작성 규칙

하지만 여 기 는 관련 IIS 재 작성 규칙 입 니 다.

<rewrite> <rules> <!-- Make sure you have a <base href="/" rel="external nofollow" /> tag to fix the root path or all relative links will break on rewrite --><rule name="AngularJS-Html5-Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="api/" negate="true" /> </conditions> <action type="Rewrite" url="wwwroot/index.html" /> </rule> </rules></rewrite>

다음 어느 위치 에서 든 UrlRewrite 모듈 을 설치 할 수 있 습 니 다.

Microsoft 다운로드 사이트

choco install urlrewrite

웹 플랫폼 설치 프로그램

Linux 에서 Docker 와 nginX 또는 Apache 를 실행 하면 유사 한 Rewrite 옵션 을 사용 할 수 있 습 니 다.
ASP.NET Core 로 클 라 이언 트 경로 처리 하기
앞에서 말 한 바 와 같이 저 는 IIS 나 nginX 와 같은 전단 웹 서버 를 사용 하여 방향 을 바 꾸 지만 보통 테스트 나 내부 응용 프로그램 을 할 때 Kestrel 이 응용 프로그램 에 직접 서 비 스 를 제공 하면 됩 니 다.Kestrel 에 게 HTTP 트 래 픽 을 직접 처리 하 라 고 하면 ASP.NET Core 코드 에서 클 라 이언 트 경 로 를 처리 해 야 합 니 다.
모든 app.Run()프로세서 캡 처
많은 방법 을 사용 할 수 있 지만 저 는 Startup 류Configure()방법 에서 매우 간단 한 예비 처리 프로그램 을 사용 하여 클 라 이언 트 의 길 을 처리 하 는 가장 간단 한 방법 을 발 견 했 습 니 다.

// set up whatever routes you use with UseMvc()// you may not need to set up any routes here// if you only use attribute routes!app.UseMvc(routes =>{ routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}");});//handle client side routesapp.Run( async (context) =>{ context.Response.ContentType = "text/html"; await context.Response.SendFileAsync(Path.Combine(env.WebRootPath,"index.html"));});

관건 은app.Run()도로 뒤의 파이프 말단 에 있 는 미들웨어 처리 프로그램 이다.서버 쪽 경로 가 일치 하 는 경 로 를 찾 지 못 하면 이 유 니 버 설 처리 프로그램 이 시 작 됩 니 다.
위의 코드 는 당신 이 할 수 있 는 가장 간단 한 일 입 니 다.단지 내용 을 index.html 로 클 라 이언 트 에 보 낼 뿐 입 니 다.정적 페이지 와 SPA 창 고 를 여러 개 가지 고 있다 면 어떤 페이지 를 불 러 올 지 추가 논 리 를 추가 할 수 있 습 니 다.
사용자 가 요청 한 URL 이 변 하지 않도록 내용 이 바 뀌 지 않 고 기 존의 URL 요청 으로 내 장 된 것 임 을 주의 하 십시오.이것 은 사용자 요청 을 확보 하 였 습 니 다.http://localhost:4200/albumsindex.html 대신 클 라 이언 트 페이지 로 돌아 가세 요.
모든 경로 처리 프로그램 캡 처
다른 방법 은 경로 정의 에서 마지막 으로 정 의 된 모든 캡 처 된 MVC 경로 처리 프로그램 을 사용 하 는 것 이다.이것 은 기본적으로 당신 의 MVC 루트 설정 이 처리 할 수 없 는 URL 을 들 고 루트 를 지정 한 루트 로 이동 합 니 다.
catch-all 프로세서 로 MVC 노선 을 설정 하고 이 코드 를 Startup 클래스Configure()방법 에 넣 습 니 다.

app.UseMvc(routes =>{ // default routes plus any other custom routesroutes.MapRoute(name: "default",template: "{controller=Home}/{action=Index}/{id?}"); // Catch all Route - catches anything not caught be other routesroutes.MapRoute(name: "catch-all",template: "{*url}",defaults: new {controller = "AlbumViewerApi", action = "RedirectIndex"});});

그 다음 에 똑 같은 일 을 수행 할 때 중간 부품 처리 프로그램 을 사용 합 니 다.index.html 는 다음 코드 를 사용 하여 내용 흐름 을 클 라 이언 트 에 전송 합 니 다.

// we need hosting environment for base pathpublic IHostingEnvironment HostingEnv { get; }public AlbumViewerApiController(IHostingEnvironment env){ HostingEnv = env;}[HttpGet]public IActionResult RedirectIndex(){ return new PhysicalFileResult( Path.Combine(HostingEnv.WebRootPath,"index.html"), new MediaTypeHeaderValue("text/html") );}

Catch-All Route 속성 경로 사용 하지 않 음
반환 노선 을 위해 지정 한 노선 이 그 에 게 분 배 된 속성 노선 이 없 는 지 확인 하 십시오.내 가 어제 검 사 했 을 때,나 는 컨트롤 러 의 조작 에서 이 모든 작업 을 제거 할 때 까지 전면적 인 노선 을 얻 을 수 없 었 다.
SpaServices
SpaServices 는 다른 옵션 을 제공 합 니 다.routes.MapSpaFallbackRoute()저도 시도 해 본 적 이 없 지만 ASP.NET Core 응용 프로그램 에서 Spa 서 비 스 를 사용 했다 면 잠재 적 인 지원 서버 프 리 렌 더 링 을 포함 한 간단 한 방법 일 수 있 습 니 다.
개요
HTML 5 루트 는 클 라 이언 트 응용 프로그램 에 깨끗 한 URL 을 제공 하지만,서버 지원 이 있어 야 작 동 할 수 있 습 니 다.호스트 웹 서버 의 재 작성 규칙 을 사용 하거나 Kestrel 의 미들웨어 파이프 나 사용자 정의 경로 처리 프로그램 에서 직접 설정 하 는 것 은 어렵 지 않 지만 이 기능 을 만 든 모든 ASP.NET 프로그램 에 명시 적 으로 추가 해 야 합 니 다.
오래된 Hash Bang 노선 은 깨끗 해 보이 지 않 지만 정상적으로 작 동 하 며 서버 지원 이 필요 하지 않 습 니 다.고대 브 라 우 저 를 지원 해 야 하 는 비공 식 응용 프로그램 이나 응용 프로그램 에 대해 서버 지원 이 없 는 상황 에서 산열 국 노선 은 여전히 루트 를 제공 하 는 실행 가능 한 방식 이다.
마지막 으로 완전한 웹 서버 를 사용 하고 있다 면 UrlRewriting 은 비 ASP.NET 커 널 백 엔 드 에서 직접 처리 하 는 비 API 콘 텐 츠 를 처리 하 는 가장 깨끗 하고 효과 적 인 방법 입 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.