CORS

GoGoDev·2022년 3월 18일

wanted

Wanted_PreOnBoarding_FE

목록 보기

13/14

CORS Error

cors error는 개발하면서 한번은 마주칠 오류이다.
대부분 API 요청을 하여 데이터를 불러올 때, 마주한다. 나 또한 API를 이용해 사이트를 만드려했을 때, CORS error을 마주하기도 했다.

SOP - Same-Origin Policy

통일 출처 정책은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이다.

Origin: https://www.google.com: 443
프로토콜: https:// or http
호스트: www.google.com
포트: https는 :443포트 or http는 :80포트

Origin은 프로토콜, 호스트, 포트의 조합으로 구성되어있다. 이 중 하나라도 다르면 동일 출처가 아니다.

SOP는 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여준다.

CORS

SOP를 통해 다른 사이트와 리소스 공유를 제한하기 때문에 API 호출과 같은 다른 출처의 리소스를 사용하는 것에도 제한을 두어 해당 API를 가져오지 못하는 일이 발생합니다.
이를 위해 CORS가 탄생했습니다.

CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 체제입니다.

Proxy server

CORS 에러를 해결할 방법은 여러가지가 있지만 그 중 가장 간단한 Proxy Server 예시를 가져왔다.

//packge.json
{
	dependencies: {},
  	scripts:{},
  	...
  	"proxy": "API를 가져올 URL"
}

package.json 파일에 "proxy: "API 주소"를 입력해 줍니다.

//utils.js
export const headers = {
  headers: {
    Authorization: process.env.REACT_APP_API_KEY,
    ContentType: "application/json",
  },
};

export const Proxy = window.location.hostname === "localhost" ? "" : "/proxy";

util.js 파일을 새로 생성해줍니다.
headers에 발급받은 개인의 API key를 header에 넣기 위해서 입니다.
(API 사용법은 사이트마다 다를 수 있습니다. 저의 경우 API Key값을 Header에 넣어야 정상 작동이 됩니다.)
API key 없이 API URL에 아무리 요청을 보내도 "missing or malformed jwt" 토큰이 없다고 에러 메세지를 보내거나 "Authentication is Required" 메세지를 보냅니다..

다음으로 data를 불러올 파일에 가서 axios를 통해 데이터를 가져옵니다.

import {headers, Proxy} from './util.js'

const [data, setData] = useState(null);
  const onClick = () => {
    axios
      .get(`${Proxy}/book/1`, headers)
      .then((response) => setData(response.data));
  };
  console.log(data);

Proxy Middleware

프로젝트를 진행 중에 마주한 CORS 에러를 Proxy Middleware를 통해 해결한 예시를 가져왔습니다.

//src/setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "https://test.daground.io", // api를 가져올 주소
      changeOrigin: true,
      pathRewrite: {
        "^/api": "",
      },
    })
  );
};

http-proxy-middleware의 버전이 업그레이드 되면서 yarn install 할 필요없이 상단에 const { createProxyMiddleware } = require("http-proxy-middleware"); 만 써줘도 동작합니다.

import axios from "axios";

const api = axios.create({
  baseURL: "/api",
  headers: {
    "API key 이름" : "발급받은 API 키 값", // API key를 발급받았을 때 넣자. API Docs를 잘 살펴보자
    ContentType: "application/json",
  },
});

export const get = async () =>
  await api
    .get("/book/1")
    .then(({ data }) => console.log(data));
`