📌 week(14) - CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.

벌써 코드잇 스프린트를 시작한지 어느덧 4개월 째이다.

위클리 페이퍼 주제는 팀원들과 토요일마다 얘기해보는 시간을 갖고있다. 위클리 페이퍼 블로그 업로드는 잘 안했지만..ㅎ

오랜만에 중요한 주제가 나와서 다시 글 쓰게 되었다 ✌️

---

 

👩‍🏫 CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.

CORS는 Cross-Origin Resource Sharing의 약자입니다.
A Origin에서 B Origin으로 다른 Origin으로 자원을 요청하는 현상입니다.

Warning !
Access to fetch at ‘https://myhompage.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
'https://myhomepage.com'에서 'https://localhost:3000' 출처로 가져올 수 있는 액세스가 CORS 정책에 의해 차단되었습니다. 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. 불투명한 응답이 필요에 적합한 경우, 요청 모드를 'no-cors'로 설정하여 CORS가 비활성화된 리소스를 가져오십시오.

CORS 에러가 발생 ! 하면 위와 같은 문구가 뜬다.

Access-Control-Allow-Origin은 CORS 이라는 것은 사용되는 HTTP 응답 헤더 중 하나로,

다른 도메인에서의 요청을 허용하는 경우 어떤 도메인에서 요청을 허용할 것인지를 명시합니다.

Tip💡 여기서 도메인과 Orgin의 차이를 설명해주면 좋다
− 도메인이란 ? 인터넷에서 웹사이트를 식별하기 위해 사용하는 이름 (www.example.com)
- Orgin이란 ? 프로토콜(HTTP 또는 HTTPS), 도메인(호스트), 그리고 포트 번호로 구성된 웹 리소스의 출처를 정의합니다. (http://example.com)

 

💡 동일 출처란 ? 프로토콜, 도메인, 포트가 모두 동일한 경우를 말합니다.

이 두 출처(Orgin)는 서로 다른 포트를 가지로 있으므로 CORS 정책에 따라 리소스를 공유하려면

서버에서 CORS 헤더를 설정해야 합니다.

CORS가 리소스를 공유하는 방식은 3가지 방식이 있습니다. 그 중에 단순 요청에 대해서 알아보자면

단순 요청(Simple requests)

참고: https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

주목할 요청 헤더는 Origin 으로, 요청이 https://foo.example 에서 왔음을 나타냅니다.

서버는 Access-Control-Allow-Origin 헤더에 모든 출처에서 해당 리소스에 접근할 수 있음을 의미하는 Access-Control-Allow-Origin: * 을 반환합니다.

 

Next.js에서 API Routes를 사용할 때 동일한 출처와 다른 출처에서의 리소스 요청

API Routes는 기본적으로 동일 출처 만 허용하며, CORS 헤더를 지정하지 않습니다(opens in a new tab).
이러한 동작은 CORS 요청 도우미(opens in a new tab) 로 요청 핸들러를 감싸서 사용자 정의할 수 있습니다.

 

CORS를 설정해서 Access-Control-Allow-Origin 헤더를 추가하면, 지정한 도메인에서 오는 요청만 허용하도록 조정

⬇️ 요청 핸들러를 감싸서 사용자 정의하여 사용한 코드 예시.

import Cors from 'cors';
import initMiddleware from '../../lib/init-middleware';

// CORS 설정 초기화
const cors = initMiddleware(
  Cors({
    methods: ['GET', 'POST'],
    origin: 'https://allowed-domain.com', // 허용할 도메인
  })
);

export default async function handler(req, res) {
  // 요청 핸들러 전에 CORS 설정 적용
  await cors(req, res);
  
  res.json({ message: 'Hello, CORS is now enabled for allowed-domain.com' });
}

 

 

서버를 수정할 수 없다면 프론트 자제에서 proxy 서버를 띄워서 대신 요청을 보내게 하는 방법이 있다.

우선, CORS 문제는 브라우저에서만 나타난다. 서버와 서버, 변조된 브라우저면 CORS 문제가 발생하지 않는다.

이 때 proxy 서버는 프론트랑 오리진이 같아야 한다. 그러면 프론트와 proxy 서버 간에는 오리진이 같기 때문에 CORS 문제가 발생하지 않고 proxy 서버와 백엔드 서버 간에는 Server To Server이기 때문에 CORS 문제가 발생하지 않는다.

교차 출처 리소스 공유 (CORS) - HTTP | MDN