FE

CORS

뚱인데욥 2023. 6. 1. 18:39

콘솔창에 나오는 CORS 에러

 

SOP (Same-Origin Policy)

➡️ 같은 출처의 리소스만 공유가 가능하다.

  • 프로토콜, 호스트, 포트의 조합이며 하나라도 다를 경우 동일한 출처가 아니다. 
  • 공격받을 수 있는 경로를 줄여준다.

예시) https://codestates.com:443 vs https://codestates.com

https 프로토콜의 기본 포트는 443이며 이 두 URI는 프로토콜, 호스트, 포트가 모두 동일 출처이다. 

 

 

CORS (Cross-Origin Resource Sharing)

➡️ 교차 출처 리소스 공유(추가 HTTP 헤더를 사용해서 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제)

브라우저는 SOP에 의해 다른 출처의 리소스 공유를 막았지만 CORS 설정을 통해 서버의 응답 헤더에 'Access-Control-Allow-Origin'을 사용해 접근 권한을 얻을 수 있게 된다.

(에러는 CORS 때문이 아님. SOP 때문)

 

1. 프리플라이트 요청 (Preflight Request)

요청을 보내 기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것. 요청을 보내고 응답 헤더의 Access-Control-Allow-Origin으로 요청을 보낸 출처가 돌아오면 실제 요청을 보낸다. 접근 권한이 없으면 CORS 에러를 띄우고 실제 요청은 전달되지 않는다.

 

➡️ 프라플라이트 요청이 필요한 이유?

  • 미리 권한을 확인할 수 있고, 통째로 보내는 것보다 효율적임
  • 대비되어 있지 않은 서버 보호

 

 

2. 단순 요청 (Simple Request)

➡️ 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것

조건이 있는데 조건은 모두 만족시키긴 어렵다.

  • GET, HEAD, POST 요청 중 하나여야함
  • 자동으로 설정되는 헤더 외에 Accept, Accept-Language, Content-Language, Content-Type 헤더 값만 수동으로 설정 (Content-Type 헤더에는 application/x-www-form-urlencoded, multipart/form-data, text/plain 값만 허용)

3. 인증정보를 포함한 요청 (Credintialed Request)

요청 헤더에 인증 정보를 담아내는 요청. 민감한 정보기 때문에 출처가 다를 경우 설정하지 않으면 쿠키를 보낼 수 없다. 클라이언트, 서버 양측 모두 CORS 설정이 필요함

  • 클라이언트 측에서 요청헤더에 withCredentials:true 를 넣어줘야함
  • 서버측에서 응답 헤더에 Access-Control-Allow-Credentials:true를 넣어줘야함
  • 서버측에서 Access-Control-Allow-Origin을 설정할 때, 모든 출처를 허용한다는 뜻의 와일드카드(*)로 설정하면 에러가 남. 출처를 정확하게 설정해야함

 

CORS 설정 방법

1. Node.js 서버

간단한 HTTP 서버를 만들고 응답헤더를 설정해줄 수 있다

const http = require('http');

const server = http.createServer((request, response) => {
// 모든 도메인
  response.setHeader("Access-Control-Allow-Origin", "*");

// 특정 도메인
  response.setHeader("Access-Control-Allow-Origin", "https://codestates.com");

// 인증 정보를 포함한 요청을 받을 경우
  response.setHeader("Access-Control-Allow-Credentials", "true");
})

 

 

2. Express 서버

cors 미들웨어를 사용해서 간단하게 CORS 설정해줄 수 있다.

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

//모든 도메인
app.use(cors());

//특정 도메인
const options = {
  origin: "https://codestates.com", // 접근 권한을 부여하는 도메인
  credentials: true, // 응답 헤더에 Access-Control-Allow-Credentials 추가
  optionsSuccessStatus: 200, // 응답 상태 200으로 설정
};

app.use(cors(options));

//특정 요청
app.get("/example/:id", cors(), function (req, res, next) {
  res.json({ msg: "example" });
});
저작자표시 (새창열림)