cors랑 한 바탕 ⚡

mynoseis3·2024년 2월 28일

practice

목록 보기

25/32

오픈 API를 사용한 프로젝트를 하던 중 가장 속썩이는 친구는
CORS였다 ..
분명 전에 했던 프로젝트에서도 CORS에러가 발생했을 때 해결을 했었는데
이번엔 전에 했던 방법대로 다 적용해보아도 해결되지 않았다.
백엔드 서버를 구현해서 시도하면 로컬에서는 cors에러 없이 사용 가능하지만
서버를 배포하고 나서 배포한 서버를 통해 요청을 얻으려고 하면 다시 cors 에러가 났다.
헤더 설정 같은 부분들도 전부 해봤지만 같은 결과가 나왔다.

시도했던 방법들을 정리해두자

CORS

CORS는 한 도메인 또는 Origin의 웹 페이지가
다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게 하는 보안 메커니즘이다.

CORS는 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식으로 CORS라는 이름으로 표준화 되었다.
CORS는 최신 브라우저에서 구현된 동일 출처 정책(same-origin policy) 때문에 등장했다.

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)
출처 : ‘오리진(origin)’의 번역 표현
URL에서 도메인만 뜻하는 게 아니라 프로토콜과 포트까지 포함하는 개념

동일 출처 정책

동일 출처 정책은 동일한 출처의 리소스에만 접근하도록 제한하는 것이다.

출처를 구성하는 3가지 요소

프로토콜 - 도메인(호스트 이름) - 포트

이 중 하나라도 다르면 CORS 에러를 만나게 된다.

href 구조

이미지 출처 tosspayments

https://docs.tosspayments.com/resources/glossary/cors

시도한 것들

1. CORS Middleware 설정

예시 코드

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

2. Preflight 요청 처리

app.options('*', cors());

3. 정확한 헤더 설정

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
});

4. 헤더 직접 삽입

5. 요청시 인증 헤더 포함 여부 확인(credentials 옵션을 사용)

app.use(cors({ credentials: true }));

6. netlify테스트/netlify 링크 http 시도

로컬에서는 서버로 cors에러 없이 데이터를 받아오는데
프론트엔드 코드를 netlify에 배포하고 테스트해보면
다시 cors 에러가 났다.

cors에 대해 살펴보다가 https/http이 달라도 origin이 다른거라는 걸 발견하고
서버 코드에서 netlify 링크를 http로 바꾸고 배포하고 테스트해도 같은 결과였다.

사용하려는 알라딘 api 엔드포인트 url이 http인데
혹시 이 url이 https 였다면 해결되지 않았을까라는 생각도 든다.

뭐가 뭔지 확실히 알지 못하여 혼돈의 카오스 ... 🌪️

7. 크롬 확장 프로그램

임시적인 방법으로 cors를 테스트할 수 있다.

임시로 해결한 방법

프록시 서버를 사용하는 것이었다.

api 호출 URL 앞에 프록시 서버 URL 붙이기
임시 서버 URL(https://cors-anywhere.herokuapp.com/corsdemo)접속
-- > 임시서버에 대한 사용 request버튼 클릭

그러면 로컬에서 프론트엔드 코드로만으로도 cors 에러 없이 데이터를 확인할 수 있다.

근본적인 해결법인지는 모르겠지만 프록시 서버를 사용하면
cors를 우회할 수 있는 것 같다.

배포한 html 파일에도 적용이 되는지 테스트해보니 호출은 정상적으로 되고 있는 것 같다. 이제 여러가지 구현해보면서 다른 문제가 없는지도 계속 살펴보자 !

며칠동안 백엔드쪽을 테스트했는데
왜 백엔드 서버에서 cors 에러가 안 잡히는지가 너무도 궁금하다.
찾아보면서 해결이 됐다는 내용들에 대해서 전부 시도해봤지만
나의 경우엔 계속 같은 에러가 나타났다. 어후후
추후에 프록시 서버를 직접 만드는 것도 배워보고 싶다.
해결 못한 부분들에 대한 해답을 찾으면 다시 정리해두자 !

참고
https://jinnypark9393.notion.site/Open-DART-API-ba5121abefee4838a3b3c321d2fbfdb0
https://github.com/Rob--W/cors-anywhere