인프런 커뮤니티 질문&답변
작성한 질문수
배포 강의에서 Blocked request 경우, vite.config.js 파일도 수정해야되나요?
해결된 질문
작성
·
180
·
수정됨
0
안녕하세요!
강의 듣다가 최종 배포에서 질문이 있습니다.
강의에서는 vite.config.js 파일 내용 수정은 없는 것 같은데요
아래 순서로 했는데 홈페이지 메인화면에서
Blocked request. This host ("5d39-218-159-221-155.ngrok-free.app") is not allowed.
To allow this host, add "5d39-218-159-221-155.ngrok-free.app" to server.allowedHosts in vite.config.js.
에러가 뜨는데요
vite.config.js 파일 수정을 해야되나요?
프론트, 백앤드 서버 실행
cmd 창에서 ngrok http 5173 입력
index.js 파일에서 아래와 같이 수정
app.use(cors({ //origin: "http://localhost:5173", origin: "https://5d39-218-159-221-155.ngrok-free.app", credentials: true, }));ngrok 에러는 아래와 같아요
08:36:45.923 KST GET /favicon.ico 403 Forbidden
답변 1
0
안녕하세요. 질문 주셔서 감사합니다!
Blocked request. This host ("5d39-218-159-221-155.ngrok-free.app") is not allowed.
To allow this host, add "5d39-218-159-221-155.ngrok-free.app" to server.allowedHosts in vite.config.js.이 에러는 Vite 개발 서버가 외부 도메인(ngrok 주소 등)에서의 접근을 기본적으로 차단하기 때문에 발생한 문제입니다. 해결 방법은 질문자님이 말씀하신대로 vite.config.js 파일 수정입니다!
강의에서는 Vite 버전이 낮거나 allowedHosts 기본 제한이 없던 환경이었기 때문에, ngrok 주소로 접속해도 별도 설정 없이 작동했던 것으로 보입니다.
vite.config.js 수정 코드
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
allowedHosts: ['5d39-218-159-221-155.ngrok-free.app'], // ngrok 주소를 입력해주세요!
},
});또한, 개발용으로 ngrok를 자주 쓸 경우엔 allowedHosts: 'all'로 설정해두면 편합니다.
server: {
allowedHosts: 'all',
}도움이 되었길 바랍니다. 감사합니다!