CORS

CORS(Cross Origin Resource Sharing)란

브라우저에는 SOP (Same Origin Policy - 동일 출처 정책)라는 것이 존재하는데 특정 origin에서 불러온 문서나 스크립트가 다른 origin에서 가져온 리소스와 상호작용하는 것을 제한하는 브라우저의 보안 방식이다

same origin은 3가지가 같은가를 통해 구분한다
이 중 하나라도 다르다면 다른 origin으로 인식한다

protocol   host   port

예를 들어 http://localhost:3000 는 다음과 같이 나눌 수 있다
protocol(scheme) >> http://
host >> localhost
port >> :3000

CORS는 HTTP 헤더를 사용하여, 한 origin에서 실행 중인 웹 애플리케이션이 다른 origin의 선택한 resource에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다

다음처럼 요청받는 쪽 서버에서 헤더를 설정해주면 다른 origin에서도 접근할 수 있다

const express = require('express')
const app = express()

app.post('/getCookie',(req,res)=>{
  res.setHeader('Access-Control-Allow-Origin','http://localhost:4000')
  res.setHeader('Access-Control-Allow-Methods','POST, GET, OPTIONS, DELETE')
  res.setHeader('Access-Control-Allow-Credentials','true')
  res.setHeader('Access-Control-Allow-Headers','Content-type')
  
  res.send('cookie~?')
})

모든 서버의 response에 대해 일일히 헤더를 작성하기는 어려우므로 cors library를 이용하면 더 쉽게 할 수 있다

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

const app = express();

const corsOptions = {
  origin: 'http://localhost:4000',
  methods: 'POST, GET, OPTIONS, DELETE',
  credentials: 'true',
  allowHeaders: 'Content-type'
}

app.use(cors(corsOptions));



app.post('/getCookie',(req,res)=>{
  res.send('cookie~?')
})

*우리가 프론트단 html에서 axios로 서버단의 resource를 받아오려고 할 때 주로 CORS에러를 마주하게 되는데 CORS는 브라우저에서 제한한 것이므로 서버끼리 직접 통신할 때는 브라우저를 경유하지 않아 발생하지 않는다

CORS와 SOP에 대해 참고한 글

로컬에서 CORS policy 관련 에러가 발생하는 이유

CORS에 대해 더 자세히 알아보려면

교차 출처 리소스 공유 (CORS) [MDN]

https://homoefficio.github.io/2015/07/21/Cross-Origin-Resource-Sharing/