CORS 에러 (vue.js, springboot) / proxy

SOP?

자바스크립트 엔진 표준 스펙의 보안 규칙 중, 하나의 출처(Origin)에서 로드된 자원(문서나 스크립트)이 일치하지 않는 자원과 상호작용 하지 못하도록 요청 발생을 제한하는 정책이 SOP (Same Origin Policy, 동일 출처 정책) 이다.

즉, http://localhost:8000와 http://localhost:8000/posts는 같은 출처라서 상호작용이 가능한데, http://google.com에서 http://localhost:8000를 호출하면 SOP에 위배된다. 

동일 출처의 기준

 http://example.com:8042/over/there?name=ferret&page=1#nose
 \__/  \__________/\___/ \________/ \________________/\___/
   |         |       |       |               |          |
protocol    host    port    path       query string  Fragment

protocol, host, port가 같아야 동일한 출처.

 

ex) http://localhost와 동일 출처인 것은?

• http://localhost:80 // ⭕
• http://localhost/api/cors // ⭕
• http://127.0.0.1 // ❌ localhost가 맞긴 하지만, 브라우저 입장에서는 string value로 비교. 따라서 localhost와 127.0.0.1이 서로 다르기 떄문에 다른 출처라고 판단된다.

 

 

CORS?

CORS(Cross Origin Resource Sharing)란 도메인과 포트가 다른 서버로 client가 요청했을때 브라우저가 보안상 이유로 API를 차단하는 문제이다.

예를들어 client는 8080포트로, server는 9000포트일때, 또는 로컬에서 다른서버로 호출할때 발생한다.

 

 

 

 

프론트에서 해결 : 프록시

1. 루트 디렉토리에 vue.config.js 라는 파일을 만들고 그 안에 아래의 코드를 추가한다. (루트 도메인만 적는다)

module.exports = {
  devServer: {
    proxy: 'http://localhost:8088' //server port
  }
};

 

2. server에 요청하는 url을 다음와 같이 수정한다. (루트 도메인을 제외한 나머지를 적)

  created(){
    axios.get('/test')
      .then(function(response){
        console.log(response);
      })
      .catch(function(error){
        console.log(error);
      });
  },
}

 

 

• proxy 설정 전: 웹 페이지 -> 서버
• proxy 설정 후: 웹 페이지 -> proxy -> 서버

proxy 설정을 함으로써 API 통신을 할 때 proxy에 설정한 URL로 변경 되어 API 통신이 이루어진다.

 

 

 

 

백에서 해결 : @CrossOrigin

일단은 간단하게 CORS에 대해서 처리하기 위해서 BoardController에서 @CrossOrigin(origins = "*") 어노테이션을 추가해줍니다.