CORS 에러

Notion Api로 블로그를 만들면서 cors에러를 마주하여 해당 에러에 대해 알아보았다.

CORS?

Cross Origin Resource Sharing의 줄임말로 교차-출처 리소스 공유하고도 한다.

웹 어플리케이션에서 다른 도메인의 리소스에 접근할 때 발생하는 보안 이슈를 해결하기 위한 표준 방법으로  CORS는 브라우저 단에서 작동하며, 웹 서버가 특정한 HTTP 헤더를 반환함으로써 웹 브라우저가 자원에 대한 권한을 부여하도록 한다. 이 헤더는 서버에게 특정한 도메인, 프로토콜, 포트에서만 요청을 허용하도록 지시할 수 있다.

CORS는 최신 브라우저에서 구현된 동일 출처 정책(same-origin policy) 때문에 등장했다.

 

출처(Origin)?

여기서 출처(Oringin) 은 Protolcol과 Host 그리고 Port까지 모두 합친 URL을 의미한다.

예시로 https://www.domain.com:80/user?query=name&page=1#first주소를 살펴보면 아래와 같다.

• Protocol(Scheme) : http, https
• Host : 사이트 도메인
• Port : 포트 번호
• Path : 사이트 내부 경로
• Query string : 요청의 key와 value값
• Fragment : 해시 태크

 

동일 출처 정책(Same-Origin Policy)?

동일 출처 정책은 동일한 출처의 리소스 에만 접근하도록 제한하는 것이다. 여기서 출처는 프로토콜, 호스트 명, 포트가 같다는 것을 의미한다.

그래서 같은 프로토콜, 호스트, 포트를 사용한다면, 그 뒤의 다른 요소는 다르더라도 같은 출처로 인정된다.

이 주소 기준으로 https://www.domain.com:80

https://www.domain.com:80/user : 가능 (프로토콜, 호스트 명, 포트 동일)

http://www.domain.com:80 : 불가능 (프로토콜 다름)

https://www.domain.com:8080 : (포트 다름)

 

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

다른 출처 간의 상호작용을 해야 하는 케이스 등을 위한 다른 출처의 리소스 공유에 대한 허용 / 비허용 정책이 있다.

 

CORS에러 해결 방법

서버에서 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재해서 클라이언트에 응답하면 되는 데 백엔드 개발자가 고쳐야 될 부분으로 프론트엔드에서 해결할 수 있는 간단한 방법에 대해 알아보았다.

• 다른 사람이 만든 프록시 서버 이용하기

요청해야 하는 URL 앞에 프록시 서버 URL을 붙여 요청하게 되면 해결할 수 있다.

https://cors-anywhere/herokuapp.com

해당 서버를 활용해서 요청을 가로채 HTTP 응답 헤더에 Access-Control-Allow-Origin : * 를 설정해 주면 된다.

axois({
  method:"GET",
  url:`https://cors-anywhere/herokuapp.com/{URL},
  header:{
	'APIKey':'....'
  }
})

 

다른 블로그에서도 많이 언급된 heroku가 많이 사용되었지만 무료 버전이 사라졌다.

• 클라이언트 : http-proxy-middleware 사용하기

http-proxy-middleware를 설치한 후에 setupProxy.js라는 파일을 src 폴더 내에 만들고 다음의 코드를 작성해 준다.

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

module.exports = function(app) {
	app.use(
		"/api",
		createProxyMiddleware({
				target: "http://localhost:5000",
				changeOrigin: true,	
		})
	)
}

 

 

———

Notion APi CORS에러 해결

개인 블로그를 만들면서 위의 방법도 사용해 봤지만 해결이 되지 않아 getServerSideProps로 불러오니 해결이 되었다.

 

 

참고

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

 

CORS 발생 원인과 해결 방법

 

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