해결된 질문
작성
·
844
0
안녕하세요.
혼자 개인 프로젝트를 하면서 강의를 듣고 있는데 궁금한 점이 생겨서 질문 남깁니다!
현재 projectA 안에 프론트, 백 폴더를 제로초님처럼 만들어놓고 프론트는 react+typescript / 백은 nestjs+typescript 로 전부 설치해놓은 상태입니다.
다만, 이렇게 할 경우 proxy 설정을 프론트에서 해줘야 된다고 하여 아래 처럼 설정을 해당 강의 듣기전에 구글링하여 만들어놨었습니다.
미들웨어 설치
npm i http-proxy-middleware
projectA > pront > src > setupProxy.ts
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
createProxyMiddleware("/api", {
target: "http://localhost:3095",
changeOrigin: true,
})
);
};
package.json
// 위에 생략...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3095/",
// 아래 생략...
여기서 궁금한 점이.. proxy를 설정할 때 미들웨어를 설치하여 setupProxy.js 파일을 만들어서 사용하라는 글들을 많이 봐서 그대로 따라하고 파일명만 ts로 변경했었습니다.
이렇게 하니 api를 불러오는 url 부분에 localhost:3095~~~ 이 부분을 전부 다 입력해야 에러가 나지 않았고 생략해서 사용하려면 package.json에 proxy 경로를 추가하는 방법밖에는 없는걸까요??(미들웨어 설치 + setupProxy.ts 파일로만 proxy 설정을 해보고 싶었는데 이 경우에는 api url 불러오는 부분에 locallhost~~~... 를 쓸 수 밖에 없는지가 궁금합니다.)
다만.. package.json에 proxy 경로를 넣어놓고 setupProxy.ts 파일의 코드를 지워도 제대로 돌아가더라구요.. setupProxy.ts 파일을 잘 못 만든걸까요? 이때 돌아가는 이유가 package.json의 proxy 경로로만 인식을 한 것 같습니다..
https://www.npmjs.com/package/http-proxy-middleware
마지막으로 위 proxy 설정 파일을 해주면 cors 오류가 발생하지 않는 것 같은데 둘중 하나만 설정을 해주는 것이 맞을까요? 둘다 해줘야 하는건지.. 프론트에서 proxy만 하거나 백에서 cors를 설치하는 방향 둘중에 뭐가 더 나은 방향인지도 궁금합니다!
원래는 아래 cors 설치하고 아래 코드까지 작성 해놨었습니다.
main.ts(back 폴더안)
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import cors = require('cors');
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.use(cors());
await app.listen(process.env.PORT);
console.log(`listening on port ${process.env.PORT}`);
}
bootstrap();
답변 1
1
프록시의 역할은 /api/x 주소로 입력했을때 알아서 http://localhost:3095/x로 바꿔서 보내주는 겁니다. /api로 시작하게 주소 입력하셨나요?
보통 cors를 localhost를 허용하지는 않으므로 프론트에서는 proxy를 쓰는게 좋긴 합니다.
답변 감사합니다! 프론트에서 호출하는 부분은 아래 예시처럼 호출을 했고
백쪽 controller는 아래로 작성해놨었습니다.
@Get('/api/users')
미들웨어 설치랑 setupProxy.ts 파일만 만들어 놓고 아래 처럼 경로를 작성하면 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON <- 이 에러가 콘솔에 찍힙니다.. 경로가 잘 못 되었을때 나타나는 오류 같아서요..! (백쪽 cors 호출과 프론트 package.json에 proxy는 전부 주석처리 해놓은 상태입니다.)
어떤 부분을 더 확인해봐야 할까요?