CORS(Cross-Origin Resource Sharing) 교차 출처 리소스 공유

CORS 란?

추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 

 

필요한 이유?

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 

CORS 이슈 해결 방법?

- 서버의 Access-Control-Allow-Origin 헤더에는 요청의 Origin 헤더에서 전송된 값이 포함되어야 합니다.
(서버에 접근가능 할 때 가능)

- 동일한 출처에서 리소스 요청하기

 

 

공공 API 등 서버에 접근할 수 없는 경우 어떻게 해결?

1. 남이 만든 프록시 서버 사용하기 

단점 : 서버 과부하 방지를 위해 네트워크 요청 횟수가 제한됨.

장점 : 별 생각 없이 사용가능
ex : http://cors-anywhere.herokuapp.com/corsdemo

 

 

2. 직접 프록시 서버 구축하기

express 서버 구축, Heroku 서버 배포 및 호스팅

 

3. http-proxy-middlesare 라이브러리 사용하기

(로컬 환경일 경우 한정)

설치 : npm i -save http-proxy-middleware

활용: src/setUpProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app){
  app.use(
    createProxyMiddleware('/api', {
      target: 'https://api.nexon.co.kr',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '' // URL ^/api -> 공백 변경
      }
    })
  )
};

요청 : scr/Reducer/matchDetail.js

...
export const fetchMatchDetail = (matchId) => async (dispatch) => {
  dispatch({ type: GET_MATCH_DETAIL });
  const config = {
    method: 'get',
    url: `api/kart/v1.0/matches/${matchId}`,
    headers: {
      Authorization: process.env.REACT_APP_NEXON_AUTHORIZATION
    },
  };
  ...

https://xiubindev.tistory.com/115

나를 너무나 힘들게 했던 CORS 에러 해결하기 😂

https://react.vlpt.us/redux-middleware/09-cors-and-proxy.html

9. CORS 와 Webpack DevServer Proxy · GitBook