수정하기 - 웹서버에서 CORS 설정을 하는 방법은?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

웹서버에서 CORS(Cross-Origin Resource Sharing)를 설정하는 방법은 사용하는 웹서버 종류(Apache, Nginx, Express.js 등)에 따라 조금씩 다르지만, 기본 원리는 동일합니다. CORS는 한 도메인에서 실행 중인 웹 애플리케이션이 다른 도메인에 있는 리소스에 접근할 때 발생하는 보안 정책 문제를 해결하기 위해 브라우저가 서버와 통신할 때 HTTP 헤더를 사용하는 방식입니다. 즉, 서버가 클라이언트의 다른 도메인 요청을 허용할지 명시적으로 지정해 주는 것입니다.    아래는 주요 웹서버별 CORS 설정 방법과 작동 원리에 대한 자세한 설명입니다.    ---           1. CORS의 기본 원리와 필요 헤더    -   Origin 헤더  : 브라우저가 요청 시 자동으로 보내는 헤더로 호출하는 출처(도메인, 포트, 프로토콜)를 서버에 알려줌.  -   Access-Control-Allow-Origin  : 서버가 응답할 때 반드시 포함해야 하며, 허용할 클라이언트 도메인을 명시함. `*`는 모든 도메인 허용.  -   Access-Control-Allow-Methods  : 어떤 HTTP 메서드(GET, POST, PUT 등)를 허용할지 서버가 명시.  -   Access-Control-Allow-Headers  : 클라이언트가 요청 시 사용하는 커스텀 헤더를 허용할지 명시.  -   Access-Control-Allow-Credentials  : 쿠키, 인<a href='https://sangseek.com/sangseeks/증정/ko'>증정</a>보 등을 포함한 요청 허용 여부.  -   Preflight 요청 처리(OPTIONS 메서드)  : 복잡한 요청 전에 브라우저가 보내는 사전 요청으로, 서버가 이에 대한 허용 여부를 명확히 해 주어야 함.    서버가 적절한 `Access-Control-*` 헤더를 응답에 포함시키면, 브라우저는 해당 요청을 허용하고, 그렇지 않으면 보안 정책에 의해 차단합니다.    ---           2. Apache 웹서버에서 CORS 설정    Apache에서는 `.htaccess` 파일이나 서버 설정 파일(httpd.conf, apache2.conf 등)을 통해 CORS를 설정할 수 있습니다.    -   기본 설정 예시 (모든 도메인에 대해 모든 메서드 허용)      ```apache  <IfModule mod_headers.c>      Header set Access-Control-Allow-Origin "*"      Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"      Header set Access-Control-Allow-Headers "Content-Type, Authorization"  </IfModule>  ```    설정하는 위치에 따라 `.htaccess`에 넣거나 가상호스트 설정에 넣으면 됩니다. 단, `mod_headers` 모듈이 활성화되어 있어야 합니다(`a2enmod headers` 명령으로 활성화 가능).    -   Preflight OPTIONS 요청 대응      Apache는 별도의 핸들링이 필요할 수 있으나 보통 위 설정으로 OPTIONS 요청에 대해 헤더가 삽입됨. 더 복잡한 경우, `<Limit OPTIONS>` 블록에서 처리하거나 리버스 프록시 설정과 결합할 수 있습니다.    ---           3. Nginx 웹서버에서 CORS 설정    Nginx는 location 블록 또는 server 블록에서 `add_header` 지시어로 헤더를 추가합니다.    -   기본 설정 예시      ```nginx  server {      ...        location / {          add_header 'Access-Control-Allow-Origin' '*' always;          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;          add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;               OPTIONS 메서드 처리          if ($request_method = 'OPTIONS') {              add_header 'Access-Control-Max-Age' 1728000;              add_header 'Content-Type' 'text/plain charset=UTF-8';              add_header 'Content-Length' 0;              return 204;          }            ...      }  }  ```    - `always` 옵션은 오류 응답에서도 헤더가 포함되도록 보장.  - OPTIONS 요청을 204(성공, 내용 없음)로 응답해 브라우저 <a href='https://sangseek.com/sangseeks/프리플라이트/ko'>프리플라이트</a>를 처리.    ---           4. Node.js Express 서버에서 CORS 설정    Express는 별도의 미들웨어를 사용하는 방법이 가장 편리합니다. 대표적으로 `cors`라는 npm 패키지를 사용합니다.    -   설치      ```bash  npm install cors  ```    -   사용법      ```javascript  const express = require('express');  const cors = require('cors');  const app = express();    // 모든 도메인 허용  app.use(cors());    // 특정 도메인만 허용 (옵션 객체 사용)  app.use(cors({      origin: 'https://example.com',      methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],      allowedHeaders: ['Content-Type', 'Authorization'],      credentials: true  }));    app.get('/api/data', (req, res) => {      res.json({ message: 'CORS Enabled!' });  });    app.listen(3000);  ```    `cors()` 미들웨어가 자동으로 적절한 헤더를 삽입하며, OPTIONS 프리플라이트 요청도 자동 처리합니다.    ---           5. 기타 주의사항    - `Access-Control-Allow-Origin`을 `*`로 설정하면 인증정보(쿠키, HTTP 인증 등)를 포함한 요청은 허용되지 않습니다. 인증정보와 함께 요청하려면 구체적인 도메인을 지정하고 `Access-Control-Allow-Credentials: true` 헤더를 반드시 설정해야 합니다.  - `Access-Control-Allow-Credentials`를 `true`로 설정하면 `Access-Control-Allow-Origin`은 와일드카드(`*`)를 사용할 수 없습니다. 반드시 특정 출처(origin)만 지정해야 합니다.  - 보안상, 필요한 출처만 정확히 명시하는 것이 좋습니다.  - 프록시 서버나 API 게이트웨이 뒤에서 동작하는 경우, CORS 설정이 여러 곳에 중복되어 발생하지 않도록 주의해야 합니다.    ---    요약하면, 서버에서 CORS 설정은 클라이언트의 출처별 요청을 허용하기 위해 특정 HTTP 응답 헤더들을 삽입하는 작업입니다. Apache,Nginx는 HTTP 헤더를 직접 추가하는 설정을 하고, Node.js 기반 서버는 미들웨어 사용이 일반적입니다. 제대로 설정하면 브라우저 보안 정책 때문에 차단되던 요청이 허용되어, 크로스 도메인 통신이 원활해집니다.