CORS Cross-Origin Resource Sharing, CORS에 정의는 MDN를 참고. https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
(모든 사람이 읽어야 한다고 할만큼)
웹 앱이 다른 곳의 자원에 접근할 수 있는 권한을 부여하도록 부라우저에 알려주는 체제. 웹 앱은 리소스가 자신의 출처 (도메인, 프로토콜, 포트)와 다를 때 CORS Http 요청을 실행한다.
ex) https://domain-a.com의 프론트엔드 js 코드가 http request로 https://domain-b.com/data.json을 요청하는 경우.
보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. => 중요한 말은 브라우저가 제한한다는 것. 같은 코드를 python과 nodejs에서는 에러가 나지 않으나, 이를 spa(vue, react, svelte)등의 코드가 돌아가는 클라이언트 단에서는 에러가 난다.
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
교차 출처 요청의 예시: https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우.
이슈 상황 :
노션 API를 데이터베이스로 하여, svelte 앱을 개발하고 있으나 get 요청으로 불러 올 때 CORS 에러가 발생함.
해결 1.
이에 대한 해결 방안으로 SSR 또는 SSG (리액트의 경우 nextjs)로 해결 가능. svelte의 경우 sveltekit을 사용하여 SSR, SSG의 방식으로 해결 가능.
해결 2.
서버리스 function을 활용, 중간에 CORS 정책을 추가 (Acess-Control-Allow-Origin
에 와일드카드 추가) 하여 client 단에서도 노션 api를 바로 가져다가 쓸 수 있도록 조정함.
import json
import requests
def lambda_handler(event, context):
token = 'TOKEN'
databaseId = 'DB_ID'
headers = {
"Authorization": "Bearer " + token,
"Content-Type": "application/json",
"Notion-Version": "2021-05-13"
}
readUrl = f"https://api.notion.com/v1/databases/{databaseId}/query"
res = requests.request("POST", readUrl, headers=headers)
data = res.json()
return {
'statusCode': 200,
'body': json.dumps(data)
}
개발용으로만 사용할 것.