📱📲 request, response Url 수정

전 시리즈에서 백엔드 배포까지 완성하였다면 이제 배포된 도메인을 기준으로 확정된 프론트 앤드와 백엔드 사이의 url을 수정해줍니다.

📱 FrontEnd Fetch Url수정

    makeUrl: (url) => {
        let obj = {};
        if (url[0] === '/') {
            obj['external'] = false;

            if (process.env.NODE_ENV === 'development') {
                obj['fullUrl'] = 'http://localhost:8080' + url;
            }
            else if (process.env.NODE_ENV === 'production') {
                obj['fullUrl'] = 'https://tooravel.be' + url;
            }
            else {
                new Error('process.env.NODE_ENV is not on development or production')
            }
   
          

프론트 단에서는 fetch 함수를 개인적으로 개편해서 Fetch 유틸객체를 만들어서 사용중이다.

Feteh = {
  makeUrl: () => { ...
  }
  get:() => { 
    ...
     return fetch(fullUrl, ...
  }
  post: () => {
    ...
    return fetch(fullUrl, ...
  }
}
  

이러한 형태와중에 상단의 코드가 들어 있는셈이다. 개발 환경에 따라 url을 바꿔주는데, 빌드를 하였다면 process.env.NODE_ENV 가 production 아니면 development가 되는 것을 이용한 것이다.

makeUrl 부분의 https://tooravel.be 로 수정해두면 이후 요청하는 url들이 뒤에 붙어서 요청된다.

📲 Backend cors 에러

❓ CORS 이슈란?

동일 출처 정책 SOP (Same-Origin Policy)

프로토콜/호스트/포트 가 다르다면 같은 출처의 요청이라 받아들이지 않고 거부하는 정책으로서 위 셋중 하나라도 다르다면 다른 출처의 요청으로 받아들여 거부하는 정책이다. 이 정책은 다른 출처에서 가져온 스크립트와 상호작용하는것을 제한하는 매우 보안에 중요한 정책이다.

위 문제를 해결하는 (다른 출처로 부터 스크립트가 상호작용 할 수 있는) 방법으로서 CORS(Cross-Origin Resource Sharing) 정책과 관련하여 해결이 가능하다.

CORS (Cross-Origin Resource Sharing)

클라이언트가 서버에 http 통신을 할때 상대방 측의 출처를 미리 인지하고 해당 출처에 대한 정보들에 대해서 서로 상호작용 할수 있게하는 방법이다.

이방법은 통신정보의 헤더에 서로의 도메인의 정보를 입력함으로서 해결이 가능하다. 주로 요청에 대한 응답의 헤더에 도메인정보를 기입한다. 즉, 백엔드에서 cors 정보를 수정해야한다.
Access-Control-Allow-Origin: http://example.com

프록시 서버

프록시 서버는 클라이언트와 서버 사이에서 정보교환을 도와주는 서버이다. 리소스를 요청하고자 하는 서버의 Access-Control-Allow-Origin 속성을 수정할 수 없는 경우에 굉장히 유용하다. 프록시 서버가 실제 서버에 요청을 보내서 받아온 다음 그걸 Access-Control-Allow-Origin 설정을 적절히 하여 클라이언트에게 돌려주는 방법이다.

여기서 express js의 프로젝트에서 사용가능한 cors 라이브러리를 사용한다.

const cors = require('cors');

app.use(cors({
    origin: ['https://tooravel-front.vercel.app'];
    credentials: true,
    optionsSuccessStatus: 200
}));

cors 라이브러리를 설치하고 위와 같이 origin에 허용하는 프론트앤드의 도메인 주소를 입력 하면 해당하는 프로토콜/ 호스트/포트 에 해당하는 요청에 대해서 상호작용을 할수 있다.

위 와 같이 백엔드 코드를 수정하면

드디어 내가 만든페이지에서 로그인이 된것 을 확인 할 수 있다.!