const cors = require('cors');
//같은 서버 내에서의 요청은 포트번호가 달라도 허용할 수 있도록.
app.use(cors({
origin : "*",
}))**CORS(Cross Origin Resource Sharing)의 약자**로, 클라이언트와 서버간의 포트 번호가 다를 경우에(요청을 주고 받는 곳이 다를 경우에) 리소스를 주고받을 때, 해당 데이터를 신뢰할 수 있는지 판단할 수 없기 때문에 브라우저에서 발생하게 되는 오류를 말한다. 브라우저는 결과의 헤더값을 통해 CORS를 확인하게 된다.
포스트맨과 같은 툴로 서버에 요청을 보냈을 때는 제대로 응답할 수 있어도, 브라우저에 띄워 실행했을 때 오류가 발생할 가능성이 있다.
위의 코드처럼, CORS문제를 해결하기 위해 모든 경로에 대해 CORS를 허용하는 방법은 공부할 때에는 유용한 방법일지 몰라도, 실 배포 상황에서는 좋지 않은 방법이다.
가장 좋은 방법은 특정 도메인만 허용하게 하는 것이 가장 좋은 방법이다.
CORS 문제를 살펴보면서, CSRF(Cross-Site Request Forgery) 이슈와 느낌이 비슷하다는 생각이 들어 Chat GPT에 물어봤는데, 두 가지 다 웹 보안과 관련된 이슈이지만,
CSRF는 악의적인 동작 실행을 막는 것에 초점을 두어야 하고, CORS는 리소스의 공유를 안전하게 관리하는 것에 초점을 두어야 한다는 답변을 받았다.
CSRF - 특정 동작을 유도하는것을 방어
CORS - 리소스의 공유를 안전하게 관리(제어)
스프링을 사용했을 때는 CORS 이슈에 대해 확인하지 못했는데, Spring의 보안정책에 따라 CORS에 대한 관련 설정이 적절하게 처리되어 있기 때문이라고 한다.
만약 문제가 생기거나, 추가적인 설정이 필요한 경우 다음과 같은 방법을 사용할 수 있다고 한다.
- @CrossOrigin 어노테이션 (CORS의 CrossOrigin)
- WebSecurityConfigurerAdapter (Spring Security)
- Global CORS Configuration
