[네트워크] CORS 정책과 blocked by CORS policy 에러 해결방법

CORS (교차 출처 리소스 공유)

개인 과제로 웹소켓 게임을 만들어 EC2로 배포하였다. 'local에선 잘 돌아갔으니 당연히 잘 되겠지' 라는 생각을 비웃기라도 하는 듯, 다음과 같은 에러가 콘솔창을 채웠다.

으악

 

chatGPT에게 물어 해결해보려고도 했지만,,

Solution by ChatGPT

CORS 뭐시기 에러는 계속 그대로였다..

 

CORS(Croos-Origin Resource Sharing)이란 교차 출처 리소스 공유라는 뜻으로 이 출처가 단지 URL의 도메인만을 뜻하는 것이 아니라 프로토콜과 포트까지 포함하는 개념이다. 때문에 출처를 구성하는 세 요소인 프로토콜, 도메인, 포트 중 하나라도 다르면 CORS 에러를 만나게 되는 것이다.

출처: https://docs.tosspayments.com/resources/glossary/cors

• 도메인(Hostname): myshop.com
• 출처(Origin): https://www.myshop.com

출처가 교차한다 ≒ 두 출처가 다르다.

• CORS를 설정한다는 것은 출처가 다른 서버간의 리소스를 공유한다는 뜻이다.

출처: https://docs.tosspayments.com/resources/glossary/cors

 

 

해결방법

1. 서버에서 Access-Control-Allow-Origin 응답 헤더 세팅

• 아까 chatGPT가 추천해준 방법처럼 코드에 Access-Control-Allow-Origin 응답 헤더를 세팅하는 것이다.
• 이를 설정해서 요청을 수락할 출처를 명시적으로 지정할 수가 있으며, 출처가 다르더라도 리소스 요청을 허용하게 된다.

by ChatGPT

• 다음과 같이 cors 미들웨어를 설치하여 설정할 수도 있다고 한다.

2. 크롬 웹 브라우저의 web-security를 disable 시키고 접속하기

이는 소요 시간이 2분밖에 걸리지 않으면서 간단하고, 굉장히 본질적인 해결방법이다.

 

1. 윈도우 키를 누르고, Chrome을 찾는다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 크롬 속성을 들어간다.

 

 

3. 대상을 다음과 같이 수정한다.

// 수정 전
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"

// 수정 후
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/tmp

 

 

4. Chrome을 관리자 권한으로 실행한다.

 

 

출처

CORS 에러 해결방법. Access to XMLHttpRequest at from origin 'null' has been blocked by CORS policy: Cross origin requests