관리 메뉴

프로그래밍 삽질 중

React setProxy 관련 오류 다시 생각하기[아직 해결x] 본문

과거 프로그래밍 자료들/컴퓨터설정&오류

React setProxy 관련 오류 다시 생각하기[아직 해결x]

평부 2022. 5. 20. 23:36

* 문제 원인

* server 포트 : 5000 /  client 포트 : 3000 

- setProxy.js를 이용해 연결한 상황

- '/api' 설정 이외의 다른 루트로 연결 시 오류 발생

- 예를 들어 '/api' 이외의 '/hello'로 연결하고 싶어 연결하면 get 요청을 할 수 없다고 나옴

 

- setProxy 관련 블로그 글을 참고했으나 적용 시 오류 발생

https://xively.tistory.com/20

 

[react proxy] react proxy 여러 개 설정하기, createProxyMiddleware에서 경로 여러 개 설정, react 파일형식 pro

react와 node.js로 공부 중에 경로를 여러가지로 설정하고 싶단 생각이 들었다... 기존에 springBoot, java, html(thymleaf)로만 개발을 해서 그런지 url을 여러가지 쓰는게 습관이... 코찔이라서 react같은 SPA에

xively.tistory.com

 

-* 오류 상황

- 위의 처럼 여러 루트를 적용하고 싶을 때 적용 시 client에서 오류 발생

 

//수정 전
const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:5000",
      changeOrigin: true,
    })
  );
};

 

//수정 후
const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware(['/api', '/hello']{
      target: "http://localhost:5000",
      changeOrigin: true,
    })
  );
};