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주소를 살펴보면 아래와 같다.

동일 출처 정책(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를 설치한 후에 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로 불러오니 해결이 되었다.

참고