[Vue.js] Vue.js 서버 연결 시 CORS (Cross Origin)문제 해결하기

 

* Axios로 서버API에 접근했을 때 발생하는 상황

- CORS ( Cross-Origin Resource Sharing : 교차 출처 리소스 공유) 

: HTTP 헤더를 사용해서 실행중인 웹(www.aaa.co.kr)에서 다른 출처(www.aaa_1.co.kr)의 API에 접근하려고 할 때 이 권한을 부여하도록 브라우저에게 알려주는 체제이다.

 

기본적으로 브라우저에서는 보안 상의 이유 때무에 이 교차 출처 요청을 제한하고 있기 때문에 어떠한 설정값도 없이 서로 다른 출처를 가지고서 데이터를 공유하고자 하면 아래의 메시지가 나오게 된다.

(  'ur' has been blocked by CORS policy: ~~ 라고 발생한다. )

 

이를 해결하긴 위해선 '이 리소스에 접근하는 것이 허용된 출처' 임을 명시해주어야 하는데, 이는 첫 번째로 백엔드에서 처리 해줄 수 있다.

 

@Controller
@RequestMapping("/school")
public class SchoolAPI {

    private SchoolService SchoolService;

    public SchoolAPI( SchoolService schoolService ){  this.SchoolService = schoolService; }

    @RequestMapping(value = "/detail" , method = RequestMethod.GET)
    @CrossOrigin(origins = "http://localhost:8081/")  // 해당 출처 허용
    public ResponseEntity getSchoolDetail() {

        return null;
    }

 

@CrossOrigin(origins = "허용하고자 하는 출처_URL")

: 어노테이션을 사용해서 처리하는 방법으로 origins에 명시한 출처를 허용한다는 뜻이다.

 

 

두번째로는 요청 시 요청값의 헤더를 설정하는 부분이다.

이 경우엔 브라우저에서 요구하는 대로 처리해주면 되는데, 요청 시 header에 'Access-Control-Allow-Origin'에 대해 허용url을 명시해주면 된다.

 

나는 Axios 인스턴스를 만들어 요청을 보내고 있기 때문에  AxiosInst에 설정해주었다.

import Axios from "axios";

const AxiosInst = Axios.create({
    baseURL : 'http://localhost:8080'
})

AxiosInst.interceptors.request.use(
    (config) => {
        config.headers.authorization = 'token';
        config.headers['Access-Control-Allow-Origin'] = '*';  // CORS 설정(모든 리소스 허용)
        return config;
    }
)

export default AxiosInst;

 

 

 

웹 브라우저에서 확인해보면 기존에 뜨던 에러가 사라졌음을 확인 할 수 있다 !!