티스토리 뷰
[react proxy] react proxy 여러 개 설정하기, createProxyMiddleware에서 경로 여러 개 설정, react 파일형식 proxy 허용 방법, proxy 와일드카드 설정
Jjiveloper 2021. 4. 10. 08:00react와 node.js로 공부 중에 경로를 여러가지로 설정하고 싶단 생각이 들었다...
기존에 springBoot, java, html(thymleaf)로만 개발을 해서 그런지 url을 여러가지 쓰는게 습관이...
코찔이라서 react같은 SPA에서 경로가 여러개이면 문제가 되는지는 잘 모른다는 점 양해바랍니다....
암튼 기존에 쓰던 '/api' 경로 외에 새로운 경로를 createProxyMiddleware proxy에 추가하는 법을 알아보자.
참고한 사이트는 이 곳 : www.npmjs.com/package/http-proxy-middleware
약 3분의 1지점에 있다.... 번역본으로 들고오자면
|
createProxyMiddleware에서 설정할 수 있는 경로의 종류가 꽤나 많았다!!
난 처음에 '**' 와일드카드를 썼는데 그렇게하니까 기존 페이지가 요청한 경로를 server에서 못찾는 듯 한 에러가 떴다...
후기는 아래 주소...(해결법은 여기 안적혀 있음) : xively.tistory.com/19
보니까 여러 경로에서 proxy를 허용해주고자 한다면 [ ] 배열형태를 쓰면 되는 것이였다... 이 간단한 것을 몰랐군
기존 src에 만들어 뒀던 setupProxy.js파일을 수정하였다.
setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app){
app.use(
createProxyMiddleware(['/api','/hello'], {
target: 'http://localhost:3001',
changeOrigin: true
})
)
};
이런식으로 추가해주면 되는 것이였다.
참고로 ['/api', '**'] 이런건 안된다....
그리고 파일형식을 proxy에서 허용해주고 싶다면
-> createProxyMiddleware('/*.html', {...}) 이렇게 하면 된다고 적혀있따!!
이렇게 proxy 여러개 설정할 사람은 없을 것 같지만... 혹시 나같은 분이 있을까봐 기록해놓기로 했따.
다들 즐코딩~~~ ヽ(✿゚▽゚)ノ