cors해결하기

  • 서버를 내가 조작할 수 없을때의 해결
    • 외부 서버로의 요청
  • 프론트 엔드 단에서 해결하는 방식은 아님

jsonp로 해결하기

  • json으로 값을 받는다면 jsonp도 할만한 방식
    • 출력이 json이 아닌방식으로 출력되면 corbd오류가 난다.

export function gogo(){ const url = ‘https://lostark.game.onstove.com/Market/GetMarketItemStats’ const params = {“itemNo”: 65202403, “belongCode”: 1,”tradeCompleteCount”:0,”bundleCount”:1,”_“:1640585912426} jsonp(url, {data: params}).then((response)=>{ console.log(‘response:’, response) }) }

프록시를 통해 해결하기

  • 프록시서버?
    • 프록시라는 말로 어렵게 느껴지지만 그저 하나의 서버를 중간에 사용하여 대리인으로 사용한다는 의미
  • 서버에서 서버로 통신은 cors 정책이 적용 안된다고한다.
    • 서버란?
      • 내가 생각하는 서버 = express가 실행되는 js파일
  • cors가 제한 되는것이 브라우저단
    • 내가 생각하는 브라우저 = ~.html에서 를 통해 실행되는 js파일들
    • 거기서 요청하는 부분들은 cors의 정책이 적용
  • 서버랑 브라우저랑 차이를 모르겠다
    • 브라우저는 html에서 사용하는 프론트엔드단에서 실행되는 js라고 생각하면되며
    • 서버는 백엔드단에서 실행되는 js
    • js를 사용한다면, express로 대부분 프론트엔드의 서버를 실행하게 될텐데 express도 잘보면 view로 되어있는 부분이 있으며 해당 view에 사용하기위해 js를 작성하는데 이게 브라우저에서 실행되는 부분이며 webpack으로 빌드시에 직접적으로 공개되는 코드이다.
    • 서버는 위에서 만든 js와 다르게 빌드(패킹)한 코드에 보이지 않으며 npm start할때에 작동되는 영역으로 build할때는 포함되지 않는 코드
      • 위에서 프론트엔드를 위해 작성한 js와 html을 인터넷에서 확인할수 있도록 포트와 ip를 통해 보여지도록 실행되는 코드이다.
    • 이 차이를 지금까지 잘 몰랐는데 위 블로그로 확실히 알 수 있었당 당다라당당 당당!
  • 방식
    • 기존은 프론트(브라우저)-(요청)-외부서버로 cors정책이 적용
    • 프록시를 적용한다면 프론트(브라우저)-프록시서버-(요청)-외부서버로 중간의 프록시 서버가 대신 요청을 해준다.
    • 결국에는 직접적으로 외부서버에 요청하기보다 프록시 서버에게 대신 요청해주는 방식이다.

참고

  • jsonp
    • https://stackoverflow.com/questions/43471288/how-to-use-jsonp-on-fetch-axios-cross-site-requests
    • https://jp1020.tistory.com/entry/JSONP-CROSS-SITE-%EC%9D%91%EB%8B%B5-%EB%B0%9B%EA%B8%B0
  • cors 정리된 블로그
    • https://xiubindev.tistory.com/115