[AWS lambda] 네이버 api CORS 우회

[AWS lambda] 네이버 api CORS 우회

2021. 8. 29. 22:37ㆍ취미로 하는 개발

네이버 장소검색 api를 사용하던 도중, 브라우저 요청에서 cors 에러가 발생하는 문제를 겪었다.

요청 헤더에 id, secret이 고스란히 노출되기 때문에 브라우저 요청이 막혀있다.

개발 환경에서야 proxy 등을 사용해서 이슈 우회가 가능하지만, 실제 배포 후에는 적용되지 않기 때문에 해당 api를 대신 호출해줄 서버가 필요하다.

간단하게 쓰고 싶은데 언제 또 서버 구축하고... 배포하고.... 이럴 때 람다를 통해 서버리스로 간단하게 구축하면 된다.

완전 간단하게 알아보자.

1. AWS계정으로 람다 콘솔에 통해 로그인한다.

2. 함수 탭으로 이동 후 함수 생성을 누른다.

3. 함수 이름을 적고 생성을 누른다.

4. 생성에 시간이 살짝 걸리니 냉장고에서 물을 떠온다.

5. 생성된 함수 왼쪽 아래에 트리거 추가를 누른다.

6. API 게이트웨이 선택 후, 새 API 생성, API 유형은 Rest API, 보안은 열기(open)으로 추가한다.

7. API 엔드포인트가 생겼다.

들어가보면 "Hello from Lambda!" 라고 출력되는 화면이 보일것이다.

여기까지가 람다버전 Helloworld라고 보면 된다.

8. 이제 코드 탭으로 돌아가서 코드를 작성해준다.

get 메소드를 통해 값을 반환하고, 검색 키워드는 key라는 이름의 쿼리 파라미터로 받아서 검색을 한다.

헤더 설정을 통해 cors 에러가 나지 않게 해준다. +@ 추가적으로 해줘야 할 부분이 있다.

const https = require("https");

exports.handler = async (event) => {
  let key = encodeURI(event.queryStringParameters.key);

  const options = {
    protocol: "https:",
    hostname: "openapi.naver.com",
    path: `/v1/search/local.json?query=${key}&display=${5}`,
    headers: {
      "X-Naver-Client-Id": "네이버 클라이언트 아이디",
      "X-Naver-Client-Secret": "네이버 클라이언트 시크릿 키",
    },
  };

  const resultObj = await new Promise((res, reject) => {
    https.get(options, (response) => {
      var result = "";
      response.on("data", function (chunk) {
        result += chunk;
      });

      response.on("end", function () {
        const body = {
          headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
            },
          statusCode: 200,
          body: JSON.stringify(result),
        };
        res(body);
      });
    });
  });
  return resultObj;
};

9. 저장 후 DEPLOY를 해준다.