🌟 CORS Error

프로젝트에서 날씨 데이터를 불러와 표시해주기 위해 openWeathermap의 api를 사용했었다.
데이터가 잘 불러와지길 바라며 Run 해보았지만.. CORS 에러가 등장😂

일단 CORS가 뭔지를 알아야 해결할 수 있을거 같아 찾아보았다.

---

📌 CORS란?

CORS는 Cross Origin Resource Sharing의 약자인데 한국어로 바꿔 교차 출처 리소스 공유 정책이다. 즉, 서로 다른 도메인간에 자원을 공유를 의미한다.
웹 어플리케이션에서 다른 도메인의 리소스에 접근할 때 발생하는 보안 이슈를 해결하기 위한 표준 방법이고 보안적인 문제로 같은 출처(주소)를 가진 애들끼리만 리소스를 주고받을 수 있는 SOP(Same Origin Policy / 동일 출처 정책)라는 정책을 우회하기 위한 정책이라고 할 수 있다.

그렇다면 동일 출처 정책이라는 것은 무엇일까?

동일 출처 정책은 말 그대로 동일한 출처의 리소스에만 접근하도록 제한하는 정책을 말한다.
여기서 말하는 출처라는것은 프로토콜, 호스트명, 포트가 같다는 것을 의미한다.
동일 출처 정책의 경우에 브라우저에서 자동으로 쿠키가 첨부된다는 특징에서 해당 부분이 보안상의 문제를 발생시킬 수 있겠다는 이슈로 생겨나게 되었고 이렇게 등장하게 된 동일 출처 정책으로 인해 CORS가 발생하게 된 것이다.

---

🔥 CORS 클라이언트 단에서 해결 방법

CORS 에러 해결 방법은 크게 클라이언트에서 해결, 서버에서 해결이 있지만 이번 프로젝트 동안 서버에서 해결은 접근할 수 있는 방법이 없었기에 먼저 클라이언트 측에서 해결하는 방법을 적어보고자 한다.

1️⃣ http-proxy-middleware 사용하기(로컬)

1. 설치

• http-proxy-middleware를 설치한다.

npm install http-proxy-middleware --save

2. setupProxy.js 세팅

• src/setupProxy.js를 생성

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

module.exports = function (app) {
    app.use(
        createProxyMiddleware('/api', {
            target: 'https://api.openweathermap.org',
            changeOrigin: true,
        })
    );
};

• ‘/api’는 ‘/api’로 시작하는 endpoint를 가진 api와 모두 매칭시킨다.
• target에는 url의 endpoint를 제외한 출처만 명시한다. https://api.openweathermap.org/api인 경우, endpoint인 /api 제외한 https://api.openweathermap.org를 명시
• changeOrigin :호스트 헤더의 출처를 대상 URL로 변경 하는지 여부이다. CORS 처리를 위해 출처를 수정해주어야 한다. 기본값: false

3. App.js에서 api 호출

// src/App.js
useEffect(() => {
  async function fetchdata() {
    const { data } = await axios.get('/api');
    console.log(data);
  }
  fetchdata();
}, []);

• App.js에서 url의 endpoint인 /api로 api를 호출한다. proxy를 세팅하면 서버를 재시작 해주어야 한다.

4. package.json에 프록시 추가해주기
package.json 파일에

"proxy": "https://api.openweathermap.org"

이 한줄을 추가했더니 로컬에서는 정상작동하는 것을 확인했다.

하지만 배포과정을 거쳐야 했기에 로컬에서의 CORS 우회만으로는 문제가 해결됐다고 볼 수 없었다.
결국 배포된 사이트의 CORS 우회 방법도 추가로 알아야 했다. 그 내용은 아래와 같다.

2️⃣ Netlify proxy server 세팅(배포)

프로젝트 배포를 Netlify를 통해 배포했기 때문에, Netlify 프록시 서버 세팅 방법을 시도해보았다.

1. 루트에 netlify.toml 파일 생성
netlify.toml은 한마디로 netlify 설정 파일이다. 여기서 리다이렉트 설정을 해주자.

[[redirects]]
  from = "/api/*"
  to = "https://api.openweathermap.org/:splat"
  status = 200
  force = true
  headers = {X-From = "Netlify"}

• /api/*로 시작하는 모든 요청을 받으면, 그걸 https://api.openweathermap.org/:splat으로 리다이렉트한다.
• :splat
  와일드카드로, 해당 위치에 매칭된 값이 그대로 사용된다는 의미한다.
  예를 들어, /api/* 패턴에서 /api/weather로 들어오는 요청이 있다면, :splat은 "weather"가 된다. 실제로는 https://api.openweathermap.org/weather로 리다이렉트 될 것이다.
  
• status = 200
  리다이렉션에 대한 응답 상태 코드를 200으로 설정하는 것. 즉, 리다이렉션이 성공적으로 이루어졌을 때 클라이언트에게 200 OK 응답을 보낸다는 뜻
• force = true
  이 옵션은 리다이렉션을 강제로 수행하도록 하는 것이다. 예를 들어, force = false로 설정하면 리다이렉션 대상으로의 경로가 이미 존재할 때에만 리다이렉션이 수행되지만, force = true로 설정하면 항상 리다이렉션이 이루어져서 목적지로 강제로 이동하게 된다.
• headers = {X-From = "Netlify"}
  이는 리다이렉션된 요청에 헤더를 추가하는 것이다. 여기서는 X-From이라는 헤더를 추가하고, 그 값으로 "Netlify"를 사용한다. 이는 리다이렉션된 요청이 Netlify에서 시작되었음을 나타내기 위한 것이다.

2. api 설정

const PROXY = window.location.hostname === 'localhost' ? '' : '/api';

export const getWeatherData = async (lat, lon) => {
  try {
    const response = await fetch(
      `${PROXY}/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${process.env.REACT_APP_WEATHER_API_KEY}&units=metric`,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      },
    );
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const weatherData = await response.json();
    return weatherData;
  } catch (error) {
    return `Error: ${error.message}`;
  }
};

로컬에서는 localhost가 붙고, 배포된 사이트에서는 리다이렉트되게 설정을 해주었지만 잘 되지 않았다..
lat, lon, api key모두 정상적으로 url에 추가되는 것도 확인했는데 뭐가 문제였을까..?
어디서 문제가 발생한 것인지 고민해보았지만 프로젝트 마감 기한이 다가와서 일단 다음 방법으로 넘어갔다. 문제점이 뭔지 리팩토링 시 찾아보고 정리해야겠다.

3️⃣ 다른 사람이 만든 프록시 서버 이용하기(로컬, 배포)

요청해야 하는 URL 앞에 프록시 서버 URL 을 붙여 요청하게 되면 해결할 수 있다.

구글에 검색해보면 나오는 프록시 서버는 몇가지가 있다.

• https://corsproxy.io/
• https://cors-anywhere.herokuapp.com/
• https://www.npmjs.com/package/local-cors-proxy (로컬만)

이 서버를 API 요청의 앞에 두면 CORS 문제를 우회할 수 있다. 사용법은 굉장히 간단하다.
API 요청 주소 앞에 해당하는 서버 주소를 붙이면 된다.

export const getWeatherData = async (lat, lon) => {
  try {
    const response = await fetch(
      'https://corsproxy.io/?' + // 이렇게 추가해주면 된다.
        encodeURIComponent(
          `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${process.env.REACT_APP_WEATHER_API_KEY}&units=metric`,
        ),
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        },
      },
    );

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const weatherData = await response.json();
    return weatherData;
  } catch (error) {
    return `Error: ${error.message}`;
  }
};

이런식으로 작성해주면 잘 작동한다!!

앞으로는..?

일단 이 방법으로 임시로 해결하였지만, 위 방법들을 찾아보고도 적용하지 못해 다시 정리해보는 시간이 필요할 듯 하다.
해결 방법은 많지만 그 방법대로 적용해보아도 안되기도 해서 매우 당황스러웠던 CORS 였다..
이전에 멘토님이 설명해주신 적이 있지만, 솔직히 말로만 들어서는 잘 체감도 이해도 안됐었다.
근데 이렇게 직접 부딪혀보니 이놈이 왜 개발자들의 머리를 부여잡게 만드는 에러인지 알 것 같았다.😂
하지만 이 기회에 CORS랑 좀 가까워진 것 같으니 앞으로는 같은 상황에서 해결방법들을 추려내며 대응할 수 있을 것이다.