cors와 options메서드

 ✅ SOP(Same-Origin-Policy)

같은 출처(origin) 끼리만 리소스를 공유할 수 있음

sop정책 위반 여부는 '브라우저'가 확인하는 것임. (브라우저 정책임)

 

 

 

 

 

✅ CORS (Cross-Origin-Resource-Sharing)

cors에러는 "브라우저"가 막는 것임 (브라우저 정책임)

sop의 예외 조항으로 cors 정책을 지킨 리소스 요청이면 브라우저는 다른 출처간의 리소스 공유를 허용해줌.

다른 출처끼리도 요청을 보낼 수 있도록 허용해줌

브라우저 정책이기 떄문에, 브라우저를 통하지 않고 api요청하는 경우는 이 정책이 적용되지 않음. (예를들면 postman으로 api호출) 

 

 

✅ CORS 동작 방식

1. 요청 헤더 : 브라우저가 현재 요청을 보내는 곳의 origin값을 요청헤더에 설정함

2. 응답 헤더 : 서버 응답시 access-control-allow-origin 에 리소스 접근을 허용할 origin값을 설정함 (*는 모두 허용)

 

3. 브라우저는 요청 헤더의 origin과 응답 헤더의 access-control-allow-origin 의 두 출처가 같은지 판단

-> 같으면 요청을 허용하고 , 다르면 cors에러 반환

 

✅ cors 해결법

<프론트에서 웹팩 Dev server로 proxy설정하기>

프론트엔드 프레임워크 사용시 로컬에 웹팩 데브 서버를 띄워놓고 개발하게 됨.
이때  웹팩 설정에 proxy를 사용하여 api요청을 우회할 수 있음.

개발할 때만 웹팩서버를 띄워서 사용되기 때문에 이 방식으로는 단순히 개발시 발생되는 cors를 해결할 수 있는 것임.

// webpack.config.js

module.exports = {
  devServer: {
    // 개발 서버 포트 설정 (선택사항)
    port: 3000,
    
    // API 요청 프록시 설정
    proxy: {
      '/api': {
        target: 'http://backend-server-url.com', // 백엔드 서버 주소
        pathRewrite: {'^/api' : ''}, // URL 리라이트 설정
        changeOrigin: true, // 옵션: Cross-Origin 요청 허용
      }
    }
  }
};

 

 

<서버에서 cors 허용 설정>

이 클라이언트 서버에서 오는 origin주소는 받겠다고 허용되는 origin을 설정해줌

 

1. Simple Request

cors요청에서 거의 사용되지 않음 

 

2. Preflight Request (거의 대부분 이 방식)

다른 출처간에 요청이 이뤄지는 경우, 브라우저는 본 api요청이 이뤄지기 전에 서버가 허용하는지 확인하기 위해 예비요청을 한다.

 

1) 예비요청 : 브라우저가 options메서드로 예비요청 보냄, options메서드는 서버에게 지원 범위에 대해 물어봄
OPTIONS 요청은 브라우저가 서버에게 지원하는 옵션들을 미리 요청하고 허가된 요청에 한해서 전송하기 위한 보안상의 목적이 있다.

 

2) 서버는 어떤 것들을 허용하고, 금지하고 있는지에 대한 정보를 응답 헤더에 담아서 줌
 Access-Control-Allow-* 에 허용하는 옵션 정보를 알려줌

3) 브라우저는 서버에서 준 정보를 가지고 본통신이 가능한지 판단함
Origin과 Access-control-allow-origin이 같은지, Access-Control-Allow-Methods, Access-Control-Allow-* 등 판단함

4) 가능하다고 판단되면 본 api요청을 정상적으로 보내고, 아니면 cors 에러 반환

fake-store 개발 예제 - 왼)예비요청 우)본요청

 

3. Credentialed Request

쿠키나 세션 정보가 담긴, 즉 민감한 인증 정보를 담은 Http 요청인 경우

 

- preflight request 처럼 options메서드로 예비요청을 한 뒤에 -> 본 요청이 이뤄지는 점은 동일함.

- Access-control-allow-origin에 * 와일드카드를 넣을 수 없음 (쿠키나 인증헤더 값은 민감해서!)

- 민감한 인증정보의 경우 Access-Control-Allow-Credentials를 true로 해줘야 함.

Access-Control-Allow-Credentials : true
- cookies, authorization headers

[서버]
app.use(cors(
  origin: true, 
  credentials: true
(}));

[프론트엔드]
axios.get("/stocks/today", {
  headers: {
  'Authorization : Bearer {토큰},
  withCredentials: true
  }
})

 

 

 

---

참고자료

cors와 options메서드의 상관관계에 대해 

cors에 대해