Local 에서 Notion API 사용하기 / CORS 임시방편 처리

임기홍·2022년 3월 18일
2

CORS에 대해서

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 CORS 오류 해결하기

이슈 상황 :
노션 API를 데이터베이스로 하여, svelte 앱을 개발하고 있으나 get 요청으로 불러 올 때 CORS 에러가 발생함.

해결 1.
이에 대한 해결 방안으로 SSR 또는 SSG (리액트의 경우 nextjs)로 해결 가능. svelte의 경우 sveltekit을 사용하여 SSR, SSG의 방식으로 해결 가능.

해결 2.
서버리스 function을 활용, 중간에 CORS 정책을 추가 (Acess-Control-Allow-Origin
에 와일드카드 추가) 하여 client 단에서도 노션 api를 바로 가져다가 쓸 수 있도록 조정함.

  1. aws lambda 코드
  • 파이썬 3.8
  • requests 계층 추가
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)
    }
  1. 생성된 람다 펑션을 api gateway에 연결 후 CORS 정책 중 Acess-Control-Allow-Origin
    에 와일드카드 추가.

  1. 해당 api gateway의 url로 notion api의 데이터가 연결되어있기 때문에 svelte의 개발 서버 로컬호스트 에서도 데이터 불러오기 가능.

개발용으로만 사용할 것.

profile
오히려 좋아😁

0개의 댓글