StockList 만들기 중 404 ERR_BAD_REQUEST 에러

Question

StockList 만들기 중 404 ERR_BAD_REQUEST 에러 발생하여

한참 구글링 해보다가 아래의 방법으로 해결하였습니다.

혹시 같은 에러 있으신 분들 참고하세요

보안 이슈땜에 proxy 설정 필요합니다.

1) npm install http-proxy-middleware --save

2) src 폴더에 setupProxy.js 생성 후

아래 내용 복사

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {

app.use(

"/api",

createProxyMiddleware({

target: "http://localhost:3000",

changeOrigin: true,

})

);

};

개복치개발자 · Answer

내용 공유 감사합니다!

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 김동석님. StockList 만들기 에서 발생한 404 ERR_BAD_REQUEST 에러 에 대한 해결 방법을 공유해주셔서 감사합니다. 이 에러는 주로 백엔드 서버로 요청이 제대로 전달되지 않을 때 발생하는데, proxy 설정을 통해 클라이언트와 서버 간의 요청을 중계하도록 설정하면 해결할 수 있습니다. 김동석님이 제시한 방법은 http-proxy-middleware 를 사용하여 React 애플리케이션에서 API 요청을 로컬 백엔드 서버로 중계하기 위한 설정입니다. 이 설정은 CORS 문제를 회피하고, 개발 환경에서 클라이언트와 서버를 실행할 때 유용합니다. 여기서 설정의 주요 지점은: http-proxy-middleware 설치 : 이 라이브러리를 설치하여 proxy 기능을 사용할 수 있습니다. setupProxy.js 파일 생성 : src 디렉토리에 setupProxy.js 파일을 생성하고, http-proxy-middleware 를 사용하여 /api 경로로 들어오는 요청을 로컬 호스트 서버로 프록시합니다. 신속한 문제 해결을 원하신다면 다음 게시물이 도움이 될 수 있습니다: - vue cli 설치 강의 중 오류 - 여기에서 다양한 npm 설정 문제 및 해결 방법을 다루고 있습니다. 저는 김동석님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

StockList 만들기 중 404 ERR_BAD_REQUEST 에러