갑자기 velog가 안돼서 일단 노션에 기록했던 걸 옮겨왔다.
서버는 5000번 포트를, 클라이언트는 3000번 포트를 가지고있는데 이렇게 두 개의 다른 포트를 가지고 있는 서버는 아무 설정 없이 Req를 보낼 수가 없다.
CORS
왜? CORS정책 때문이다.
Cross-Origin Resource Sharing - 서로 다른 Origin(여기에서는 포트)간에 자원을 교환할 때 일어난다.
다른 곳에서 우리 서버에 req를 막 보내게 되면 보안 문제가 생길 수 있기 때문.
같은 origin일 때는 항상 허용이 되지만, cross-origin일 때는 CORS에 의해 컨트롤되어 문제가 될 수 있다.
이를 해결하기 위해 여러 가지 방법이 있고 그 중 개발자 도구를 사용하는 방법도 있지만 이는 개발자를 위한 방법이기 때문에 제한적일 수 있다.
또 프론트엔드만 바꿔줄 수 있는 상황이라면 JSON P(?)라는 방식을 통해 module request를 get request로 바꾸어 해결할 수도 있지만 이는 제한적일 수 있다.
back과 front를 모두 컨트롤할 수 있게 하는 방법들이 있다.
우리는 Proxy를 사용하는 방법으로 해결하겠다.
Proxy
CRA - Proxying API Requests in Development
Configuring the Proxy Manually 부분에 보면 proxy middleware를 깔라고 되어있다.
npm i http-proxy-middleware --save로 프록시를 설치해주자.
어느 디렉토리에 깔아야 하나 했는데, client 디렉토리에 와서 깔면 되는듯.
깔고 나면, src 에 setupProxy.js 라는 파일을 만들라고 되어 있다.
우리는 서버의 index.js 에서
이렇게 5000번 포트를 사용하고 있다고 지정해준 바 있는데
setupProxy.js
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};이 말은 프론트엔드 3000번에서 타겟을 5000번으로 주겠다는 것임.
그럼 이제 proxy를 사용했으니, 지난번에 제대로 못 했던 LandingPage실습을 해 보자.
서버를 켜고..
아 그런데 그 전에 우리가 LandingPage.js 에 실험하느라 적어두었던
이 부분을 지워주어야 한다.
그리고 나서 양 서버를 켰는데 로컬호스트에서 연결을 거부.
설정이 잘못된 부분은 없어서 무슨 문제인지 알 수가 없었는데 콘솔창 확인해보니 (index):6733 crbug/1173575, non-js module files deprecated. 에러가 있어서 검색해보니 어떤 분이 글을 올려두심
진짜 황당하게도 크롬 닫았다가 열고 다시 서버를 켰더니 열렸다.
어이없음.
열고 콘솔을 확인하면
이 메시지를 확인가능하고, 이 메시지는 서버쪽 index.js 에서
app.get("/api/hello", (req, res) => {
res.send("안녕하세요.");
});이렇게 보내줬던 메시지이다!
~서로 다른 포트로 인한 CORS이슈를 proxy를 이용해 해결하는 방법이었습니다~
Proxy Server
클라이언트와 서버간에 res와 req를 주고받을 때, 이 안에 proxy server가 들어갈 수가 있다.
유저와 인터넷 사이에서 proxy server가 여러가지 일을 할 수 있는데 그 예로 아이피를 proxy server에서 임의로 변경할 수가 있다. 그러면 인터넷에서는 접근하는 사람의 진짜 IP를 모르는 것이다. 또 보내는 데이터도 임의로 바꿀 수 있으며, 방화벽 기능 / 웹 필터 기능 / 캐쉬 데이터, 공유데이터 제공 기능또한 할 수 있다.
proxy server 사용하는 이유
- 회사에서 직원들에게, 집에서 아이들에게 인터넷 사용을 제어
- 캐쉬를 이용해 더 빠른 인터넷 이용을 제공
- 더 나은 보안을 제공
- 이용 제한된 사이트에 접근 가능
