알수 없는 문제를 해결하는 방법 - vite dev server 의 404 오류 해결

vite 를 이용해서 vue3 의 기본 template 을 만들고 해당 project 를 실행할 수 있다. 

일단 node 의 최신 버전이 깔려 있다고 가정하고 다음을 진행 하겠다. 

npm init vue@latest

그러면 아래와 같은 prompt 가 나올 것이고 각각에 대해 다음과 같이 간단히 설정하자

이제 실행 하라는 데로 실행해보자

위에 녹색 명령들을 차례대로 실행 하고 나면 다음과 같이 된다. 

이제 chrome 같은 browser 에서 확인해보자

아래와 같이 실행된다. 

뭐 특별할것 없는 vue3 spa 기본 페이지 이다. 

자 이걸 보여주려는 것은 아니고...!!!

이 npm run dev 라는 명령은 vite 의 dev server 를 실행시키고

spa 앱은 해당 dev server 를 통해서 rendering 된다. 

그런데 이 dev server 는 문제가 한가지 있다. 

자 이제 c# 으로 dev server 의 주소를 넣어서 get 해보자

아주 간단한 코드이다. 

var url = "http://localhost:5173/";
WebRequest request = WebRequest.Create(url);

// 요청 유형 설정 (GET 요청)
request.Method = "GET";

// 요청을 보내고 응답을 받기 위한 WebResponse 객체 생성
WebResponse response = request.GetResponse();
HttpStatusCode statusCode = ((HttpWebResponse)response).StatusCode;
Console.WriteLine($"상태 코드: {statusCode}");

// 응답 스트림을 읽어오기 위한 StreamReader 생성
using (StreamReader reader = new StreamReader(response.GetResponseStream()))
{
    // 응답 내용을 문자열로 읽어옴
    
    string responseText = reader.ReadToEnd();

    // 응답 출력
    Console.WriteLine(responseText);
}

// 리소스 정리
response.Close();

위와 같은 오류가 발생한다.  (404) Not Found.

사실 위와 같은 오류가 발생하면 상당히 당황하게 된다. 

왜냐하면 이게 아주 신기한 현상이기 때문이다. 

browser 에서 실행하면 아무 이상이 없다. 

그런데 WebRequest 나 HttpClient 를 사용하면 오류가 발생한다. 

 

이제 주소를 다음과 같이 수정해 보자.

 

 

http://localhost:5173/index.html

이제 정상 처리된다. 

web browser 에서는 다음과 같은 경고가 뜨지만 정상 처리된다. 

하아... 분명 뭔가 문제가 있는것 같은데

c# code 의 문제인지 vite vue3 설정의 문제인지 알수가 없다. 

환장할 노릇이다. 그러다가 문득 하나의 생각이 스치게 된다. 

왜 browser 는 index.html 을 붙이던 말던 정상 처리가 된거지? 

 

혹시 browser 은 index.html 을 자동으로 start 로 인식하게 되어 있어서 된건가?

 

생각은 꼬리에 꼬리를 물고 우주 저 멀리까지 가버린다. 

자 이제 생각을 멈추자.

이제 google 의 도움을 받을때이다. 나만 오류가 생길일은 없지 않은가?

(물론 그럴때도 있다... 그럴때는 좀더 code 에 사랑을 주지 않은 자신을 탓하자!! 기도메타가 필요 할 때이다.)

 

검색을 해보면 아래 page 를 찾을수 있다. 

https://github.com/vitejs/vite/issues/9520

Vite's dev server returns 404 if the request does not contain an Accept header · Issue #9520 · vitejs/vite

내용을 정리해보면  request 시에 Accept header 에 내용을 넣지 않으면

vite 의 dev server 가 404 를 return 한다는 이야기다. !!! 엇 !!!

하지만 표준인 RFC 7231 에 의하면 accept header 의 내용이 없다면 */* 이라고 인식하고

모든 media-type 을 받아 들여야 한다는 것이다. 

( 유레카!! 아르키메데스가 이런 기분이지 않았을까? )

 

자 browser 로 돌아와서 f12 누르고 dev tool 에서 network tab 을 확인하자

localhost 호출시 Request Headers 에 Accept 에 값이 전달되는것을 확인 가능 하다.

 

그렇다면 c# 에서 request 할때 accept header 를 설정하면 된다는 이야기다.

 

과연 그런지 해보자.

...
request.Headers.Add("Accept", "text/html");
...

이제 다시 실행해보자 (index.html 은 삭제하자)

아주 잘된다. ( /-_- )/ ~~ㅛ

아 정말 이것이 무엇이란 말인가....

 

가끔 이런 경우들이 있다. 막 세상 모든게 날 억까 하는 듯한 이기분?

그럴때일수록 진정하고 다음을 마음속 깊이 말해보자.

(좋은 일은 나에게 일어난 일이고, 항상 겪을 일이고, 모든면에서 좋을 것이다.) by 하와이대저택

나에게 일어난 일을 모두 축복이라고 생각하고 좋은 기분을 유지하자는 것이다.

모두다 내 마음의 상태의 문제이고 자신의 태도의 문제이다.

 

어찌 되었든 문제의 원인은 파악을 했다. 

c# 코드를 수정할 수 있는 상황이면 좋겠으나 그렇지 못한다면 문제의 원인인 vite devserver 의 설정을 할 것이다. 

사실 vite dev server 문제라 build 하고 preview 로 실행하면 문제없이 실행된다....

 

하지만 우리가 누군가? 찝찝한건 정말 싫어하는 완벽을 꿈꾸는 programmer 아닌가?

해치워 버리자!!...

 

vue3 vite project 인 vue-test 폴더에서 vite.config.ts 를 수정하자

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig, Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'

function fixAcceptHeader404(): Plugin {
  return {
    name: 'fix-accept-header-404', // issue with vite dev server: https://github.com/vitejs/vite/issues/9520
    configureServer({ middlewares }) {
      middlewares.use((req, _res, next) => {
        if (
          req.headers.accept == null ||
          req.headers.accept == undefined ||
          req.headers.accept == ''
        )
          req.headers.accept = '*/*'
        if (req.headers.accept === 'application/json, text/plain, */*') {
          req.headers.accept = '*/*'
        }
        next()
      })
    }
  }
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [fixAcceptHeader404(), vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

위와 같이 수정하고 저장 후 다시 서버를 실행해 보자

그리고 c# 코드에서 다음 코드를 다시 삭제하자 (accept header 에 값을 넣지 말자)

...
//request.Headers.Add("Accept", "text/html");
...

그리고 실행 시켜보자...

정상적으로 실행된다. 

vite dev server 는 rfc 7231 표준을 지키지 않고 있다. 

우리는 이제 c# request 에 의한 404 not found 의 문제를 해결 하였다. 

 

관련영상

https://youtu.be/N5OJu1c_FQ4