[오류 해결] react 공공API가져오기 (CORS 오류)

CORS가 뭐지 ??

공공 데이터 OPEN API를 가져오는 도중 ...from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 와 같은 오류가 나왔다.

CORS는 Cross-Origin Resource Sharing의 약자로 제한된 리소스를 도메인 밖의 다른 도메인으로부터 요청할 수 있게 해주는 구조이다.

제한된 리소스를 요청할 때는 Origin-Header가 필요하다. 당시에는 local에서 작업해 올바른 Origin을 보낼 수 없다고 이해했고, 우회할 방법을 찾았다.

1.

환경이 Chrome을 사용할 경우 확장 프로그램 jsonp를 통해 가져오는 방법으로 사용할 수 있다.

2.

서버를 열어서 서버에서 API 데이터를 받아준 뒤 사용할 곳에 포워딩한다.

3.

react에서는 http-proxy-middleware로 로컬 요청을 중계하고, 배포할 때는 nginx 같은 서버에서 처리할 수 있다.

우선 프론트에서 구현하려고 세 번째 방법을 골랐다.

이미 axios에 대한 처리를 다 해놨었지만 예상치 못한 오류로 눈물을 머금고 삭제했다. (이래서 테스트 먼저 해야되는데..)

사용 방법

npm i http-proxy-middleware로 패키지를 설치한 후 /src/setupProxy.js를 만들고 proxy를 설정한다.

파일 내 const { createProxyMiddleware } = require("http-proxy-middleware");로 미들웨러를 만드는 함수를 가져온다.

module.exports = function (app) {
    app.use(
        // "/api"가 맨 앞에 붙은 axios 요청에 대해
        createProxyMiddleware('/api', {
            target: 'endpoint', //엔드 포인트 URL 삽입
            changeOrigin: true, //Origin을 target으로 변경하여 api 요청
            pathRewrite: {
                '^/api': '', // "/api"->null로 변경시켜 요청
            },
        })
    );
};

설정을 마치고 axios.get("/api/product");로 요청한다. 원래라면 localhost:3000/api/product로 향하지만, proxy가 /api를 지우고 endpoint/product로 보낸다.