CORS Error 해결 하기

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 란, 보안을 위해 출처가 같을 때만 리소스를 공유할 수 있도록 만든 정책임. 즉, CORS Error가 발생한다는 것은 요청하는 URL과 응답하는 URL이 일치하지 않기 때문임. (MDN 접근 제어 시나리오 예제 참고)

해결하기 가장 좋은 방법은 서버에서 설정해주면 됨. 하지만, 내가 원하는대로 서버를 건들지 못하는 경우들이 있음.

그럴 때 해결하는 방법들을 정리하고자 함.

 

1. Chrome Extension 사용

Allow CORS: Access-Control-Allow-Origin 설치 화면

많은 사람들이 이용하는 chrome extension 중 하나인 ' Allow CORS: Access-Control-Allow-Origin' 임.

이걸 해도 안 될 때가 있음.

 

2. Chrome 속성에서 대상에 특정 명령어 추가하기

기존에 열린 chrome 창이 있다면 전부 닫고, chrome 바로가기 아이콘을 우클릭하여 속성창을 열어야 함.

 

대상(T)옆에 주소가 있음. 끝에 아래 내용 추가하면 됨.

--disable-web-security --disable-gpu --user-data-dir=~/tmp

작성이 다 되면 

"C:\Program Files\ … 생략 … \chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/tmp

이런 내용이 됨.

이 상태로 적용(A) 버튼 누르고 이 아이콘으로 실행하면 됨.

 

이 방법은 임시방편임. 보안에 취약해질 수 있음.

CORS는 보안을 위해 이용하는 기술인데 이걸 막는거나 다름없음.

 

이것저것 귀찮다면 proxy server를 사용하면 됨.

 

3. Proxy Server 생성

웹팩을 사용한다면 쉽게 설정만으로 쓸 수 있음.

vue.config.js의 module.exports에 devServer 내 proxy 설정 추가해주면 됨.

const path = require('path');

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    outputDir: path.resolve(__dirname, "dist"),
    publicPath: '',
    productionSourceMap: false,

    devServer: {
        open: true,
        proxy: {
            '/*' : {
                target: `사용할 URL`,
                changeOrigin: true,
                ws: true,
                exposedHeaders: ['Content-Disposition'],
            },
        }
    },
    
... 생략 ...

이 방법의 단점은 가끔 proxy로 인해 rest api가 생각했던 것과 다르게 작동할 때가 있음.

 

 

끝!