브라우저에서 특히 무섭다는 CORS에러를 해결하는 방법.

예전에 회사에서 slack API로 간단한 애플리케이션을 만들 일이 있었다.

slack에서 깔끔하게 잘 만들어진 openGraph를 적절히 파싱하여 스크래핑하는 애플리케이션이었는데 이때 난 CORS를 처음봤었다.

 

Access to XMLHttpRequest at '' from origin '' has been block by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

일단 이 에러면 CORS에러라고 보면 되겠다.

 

보통 백엔드 서버의 주소와 프론트의 주소가 다르기 때문에 CORS 처리를 해놓지 않는다면 일반적으로 이렇게 볼 수 있다.

 

해결 방법은 두 가지 있다.

 

1. 도와줘요 백엔드 개발자님!

만약 오픈된 API를 사용하는게 아니라 로컬 서버를 통해 작업이 진행된다면 백엔드 개발자께 해당 주소(보통 포트)를 열어달라고 요청하면 된다. 다시 백엔드를 받고 나서 실행시킨다면 OK!

 

1-2. 프록시 서버 설정

로컬서버를 사용할 때 우회할 수 있는 프록시 서버를 설정해주면 일단 넘어갈 수 있다.

임시 방편이니 꼭 백엔드 개발자께 고쳐달라고 말하자.

 

webpack.config.ts

...
    devServer: {
        historyApiFallback: true,
        port: 3000,
        publicPath: '/dist/',
        proxy: {
            '/api/': {
                target: 'http://localhost:3095',
                changeOrigin: true,
            },
        },
    },
};
...

 

웹팩을 사용한다면 historyApiFallback과 proxy를 간단하게 사용해 줄 수 있다.

 

2. 오픈 API를 사용할 때

일단 예전에 slack 애플리케이션을 개발할 때, 브라우저 단에서 바로 요청을 보낼 수 없다는 당연한 사실을 그때서야 깨달았다. 구글 api는 안에 있는 콘솔로 간단하게 도메인이나 설정이 가능하기 때문에 CORS가 있는지도 몰랐는데 slack은 아니었다.

테스트 페이지에서 확인해보면 항상 잘나왔었는데 브라우저에서만 실행하면 CORS 에러가 나는게 그 이유였다.

 

결론적으로는 플랫폼 내 콘솔에서 적절하게 사용할 도메인을 입력해주고 설정이 완료가 되면 백엔드에서 요청을 보내고 받은 뒤 프론트에서 내려받아야한다.

 

브라우저에서는 아무것도 할 수 없다. 토이 프로젝트도 못한다ㅠㅠ