CORS

CORS (Cross-Origin Resource Sharing)는 웹 어플리케이션에서 다른 도메인의 리소스에 접근할 때 발생하는 보안 이슈를 해결하기 위한 표준 방법이다.

CORS는 쉽게 말해 다른 출처를 가진 리소스를 공유하기 위한 정책이다. 우리가 겪는 CORS 이슈는 이 정책을 위반했기 때문에 발생하는 것이며, 겪는 입장에서는 귀찮지만 사실 CORS는 우리가 여기저기서 가져오는 리소스가 안전하다는 최소한의 보장을 해주는 방어막인 셈이다.

CORS 에러가 발생하는 경우를 알아보자.

1. 출처가 다른 도메인 또는 포트로 리소스를 요청할 때
   CORS 정책에 따라, 출처가 다른 도메인이나 포트에서 리소스를 요청하는 경우에는 브라우저에서 CORS 에러가 발생한다. 이 경우에는 서버 측에서 Access-Control-Allow-Origin 헤더를 설정하여 요청을 허용해야 한다.

2. HTTPS에서 HTTP로 리소스를 요청할 때
   보안상의 이유로 HTTPS에서 HTTP로 리소스를 요청하는 경우에도 CORS 에러가 발생할 수 있다. 이 경우에는 HTTPS로 통신하는 서버에서 HTTP로 요청을 전달하는 것이 아니라, HTTPS로 전달해야 한다.

3. 인증 정보를 포함한 요청을 보낼 때
   CORS 정책에 따라, 인증 정보를 포함한 요청을 보낼 때에는 서버에서 Access-Control-Allow-Credentials 헤더를 설정해야 한다. 이 헤더가 설정되어 있지 않으면 브라우저는 인증 정보가 포함된 요청을 거부한다.

4. 허용되지 않은 메서드를 사용할 때
   CORS 정책에 따라, 허용되지 않은 메서드를 사용하는 요청을 보내는 경우에는 CORS 에러가 발생한다. 이 경우에는 서버에서 Access-Control-Allow-Methods 헤더를 설정하여 요청을 허용해야 한다.

5. 허용되지 않은 헤더를 사용할 때
   CORS 정책에 따라, 허용되지 않은 헤더를 사용하는 요청을 보내는 경우에도 CORS 에러가 발생한다. 이 경우에는 서버에서 Access-Control-Allow-Headers 헤더를 설정하여 요청을 허용해야 한다.

6. 프리플라이트 요청에 대한 응답이 없는 경우
   브라우저는 CORS 정책을 준수하기 위해, 프리플라이트 요청을 보내고 서버에서 이에 대한 응답을 받아야 한다. 이 때, 서버에서 응답이 없는 경우에는 CORS 에러가 발생한다. 이 경우에는 서버에서 프리플라이트 요청에 대한 응답을 보내도록 설정해야 한다.

7. 브라우저가 CORS를 지원하지 않는 경우
   일부 오래된 브라우저에서는 CORS를 지원하지 않는 경우가 있다. 이 경우에는 서버 측에서 다른 방법을 사용하여 요청을 처리해야 한다.

8. CDN 등에서 제공하는 리소스를 요청할 때
   일부 CDN 등에서 제공하는 리소스를 요청할 때에도 CORS 에러가 발생할 수 있다. 이 경우에는 CDN 서비스 제공 업체에서 CORS 설정을 제공하고 있으므로 해당 설정을 확인해야 한다.

9. 브라우저 설정 문제
   일부 브라우저에서는 CORS 에러가 발생하는 경우가 있는데, 이는 브라우저 설정에서 발생하는 문제일 수 있다. 이 경우에는 브라우저 설정을 확인하거나, 다른 브라우저를 사용하여 문제를 해결할 수 있다.

---

본인은 프론트에서 ncp ocr을 사용하기 위한 api 호출을 하는 도중에 CORS 에러가 났다.

개발중인 시기였기 때문에, ncp / Api Gateway / My Products 에서 URL 경로를 다음과 같이 설정해 주었다.

POST /{domainId}/{signature}/{path}

이후 프론트 에서

vite.config.js
export default defineConfig({
  plugins: [react()],
  server: {
    port: 8080,
    proxy: {
      '/ocr': {
        target: '프록시 설정에서 요청이 리다이렉트 될 대상 의 url',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/ocr/, ''),
      },
      // 추가적으로 다른 프록시 설정이 필요한 경우 여기에 추가
    },
  }
});

다음과 같이 설정해 주었다.