inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

[필독] express 버전 안내

CityList 개발 실습진행 오류

해결된 질문

121

yh J

작성한 질문수 11

0

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!
+ 오류 메세지도 함께 올려주시면 좋아요 🙂

const express = require('express');
const path = require('path');
const app = express();
const PORT = 3000;

app.use(express.static(path.join(__dirname, '..')));

app.get('*splat', (req, res) => {
    res.sendFile(path.join(__dirname, '..', 'index.html'));
});


app.listen(PORT, () => {
    console.log(`START SERVER`);
});

 서버키고 localhost:3000에 접속하면

저는 사이트에 이미지가 안나와요

예제를 잘못따라친건가 싶어서 노트 예제 복붙하고 했는데도 안보이네요 콘솔탭

보니까

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

라고 나오는데 해결법 아시나요?

답변은 평일 오전 10시에 순차적으로 작성해드립니다.
'질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.

javascript rest-api spa dom

답변 2

0

효빈 Hyobin

안녕하세요 yh J님! 질문 주셔서 감사합니다 🙂

혹시 코드를 아래와 같이 변경하고도 오류가 발생한다면, 다시 한 번 질문 남겨주세요!!

app.get('/*splat', (req, res) => {
    res.sendFile(path.join(__dirname, '..', 'index.html'));
});

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. yh J님.

주신 오류 메시지인 “Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of ‘text/html’. Strict MIME type checking is enforced for module scripts per HTML spec.“는 요청한 자바스크립트 파일을 서버가 HTML 파일로 응답하고 있을 때 발생합니다.

이러한 문제가 발생하는 일반적인 이유는 잘못된 경로 설정으로 자바스크립트 파일 요청에 대해 HTML 파일이 반환되고 있기 때문입니다.

해결 방법:

  1. 정적 파일 제공 경로 확인: 현재 설정된 express.static이 올바른 경로로 설정되어 있어야 합니다. 특히 정적 파일을 제공하는 디렉토리의 경로와 서버에서 참조하는 파일 경로가 일치하는지 확인해 보세요.

  2. 라우트 경로 수정: 모든 경로에 대해 HTML을 반환하도록 설정된 app.get('*splat', ...) 부분이 문제가 될 수 있습니다. 특정 API 경로나 정적 파일 경로에 대해서는 제외하고 라우팅을 설정하는 것이 필요합니다.

  3. MIME 타입 확인: 서버 설정에서 정적 파일에 대해 올바른 MIME 타입이 설정되었는지 확인하게 해주세요. 특히 JavaScript 파일의 경우 ‘text/javascript’ 이어야 합니다.

예를 들어, 라우팅 설정을 구체적으로 다루는 방법으로 아래와 같은 코드 구조를 고려할 수 있습니다:

app.get('/*.js', (req, res) => {
    res.type('text/javascript');
    res.sendFile(path.join(__dirname, '..', req.path));
});

다음 유사한 문제에 대한 질문 링크를 참고하시어 문제 해결에 도움을 받으시기 바랍니다:

문제가 지속된다면, 서버 로그에서 다른 에러 메시지가 없는지 확인하거나, 추가적인 코드 조각을 공유해주시면 더 구체적으로 도와드릴 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

콜백 함수 메서드 등록

0

82

2

ssr방식 경험

0

75

1

compare 함수 설명에 오해의 소지가 있어보입니다.

0

82

2

API를 비동기 처리하는 이유가 끊겨서 그런건가요?

0

96

2

DOM 트리 보는 곳

0

80

1

배열과 객체의 구조분해할당 방법이 다른 이유

0

82

2

배열 메서드가 순수 함수인지 확인하는 방법

0

72

2

콜백 함수의 매개변수로 _를 쓰는 이유가 무엇인가요?

0

71

2

콜백 함수의 매개변수는 어떻게 구분되나요?

0

58

1

호이스팅 안쓰는게 좋나요?

0

54

2

함수 선언식과 함수 표현식은 어떤 경우에 쓰면 좋나요?

0

82

2

?. 연산자는 자바스크립트 연산자인가요?

0

47

1

JS의 논리 연산자 &&, ||가 리액트의 조건부 렌더링 &&, ||인가요?

0

83

2

자바스크립트 질문

1

103

2

동물앨범만들기 1-1 api 오류

0

54

2

CityList개발-handleLoadMore함수질문

0

69

1

객체와 배열의 const 차이

0

46

1

const 객체/배열 차이

0

63

2

header 개발 새로고침 오류

0

67

2

Promise 객체

1

58

2

cityList 렌더가 안되는 문제

0

55

2

init 함수 앞에 await

1

66

2

동물 앨범 만들기 pushtState 관련

0

60

2

동물 앨범 만들기 사진 관련 문의

0

75

2