CORS(Cross-Origin-Resource-Sharing)

개요 : FrontEnd단에서 BackEnd에 데이터를 요청하게 되었다. 그러나 같은 서버단이 아니므로 CORS가 발생되었다.

 

브라우저는 기본적으로 SOP 정책을 따르고 있다.

SOP는 2011년 RFC 6454에서 등장한 보안 정책으로 "같은 출처에서만 리소스를 공유할 수 있다"라는

규칙을 가진 정책이다.

 

다른 사이트에서 쿠키 정보를 가지고 사용자의 요청이 아닌데도 정보를 임의로 획득할 수 있기 때문에 생긴 제도이다.

 

예를 들면 악의를 가진 사용자가 소스 코드를 CSRF(Cross-Site Request Forgery) 나 XSS(Cross-Site Scripting)와 같은 방법을 사용하여 여러분의 어플리케이션에서 코드가 실행된 것처럼 꾸며서 사용자의 정보(토큰이나 쿠키 등)를 탈취하기가 너무나도 쉬워진다.

 

설정 방법

1. Vue (FrontEnd)

vue.config.js 설정

설명

 

1. module.exports: Node.js에서 모듈을 내보내는 방법 중 하나입니다. 이 코드는 JavaScript 파일이 다른 파일에서 임포트되어 사용될 때 이 파일에서 정의된 내용을 가져올 수 있게 합니다.

→ 그럼 8080(BackEnd)으로 가면 BackEnd에서 설정이 된다는 의미인가? 맞네 module.exports = "내보내고 싶은 객체" 형태로 이해하면 된다. 

 

※ require

require은 exports처럼 내보내는 것이 아니라 특정 파일에 있는 객체를 가져올 때 사용되는 것이다.

-> require("모듈로 불러올 파일")

 

2. devServer : Vue CLI에서 제공하는 개발 서버 설정 중 하나이다. 이 객체는 Vue 개발 서버의 구성을 정의한다.

 

3. proxy : 개발 서버의 프록시 설정을 나타낸다. 개발 중에는 보통 API 요청을 백엔드 서버로 보내야 하는데, 이 때

CORS문제 등으로 인해 개발 서버와 백엔드 서버의 도메인이 다를 수 있다. 이것을 해결해주기 위한 것이다.

 

4. '/api' : 이 프록시 설정은 클라이언트에서 보내는 요청 중 주소가 '/api'로 시작하는 요청을 가로챈다.

 

5. target : '/api'로 시작하는 요청이 가로채지면, 이 요청을 어디로 전달할지를 나타낸다. 결과적으로

Vue에서 실행한 localhost:3030/api.....(FrontEnd)로 요청을 하면 결과적으로는 localhost:8080(BackEnd)로 응답한다는 것이다.

 

6. changeOrigin : 이 옵션은 프록시 서버가 요청의 원본을 변경할지 여부를 설정한다.