* 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;
웹 브라우저에서 확인해보면 기존에 뜨던 에러가 사라졌음을 확인 할 수 있다 !!
'FrontEnd > Vue.js' 카테고리의 다른 글
[Vue.js] Vuex , store로 상태 관리하기( JWT, token 저장 ) (0) | 2021.12.10 |
---|---|
[Vue.js] Vue.js axios service 설정 ( Axios 라이브러리 ) (0) | 2021.11.19 |
[Vue.js] Axios 설치 및 사용(전역 설정, 인터셉터 설정 ) (0) | 2021.11.18 |
[Vue.js] Vue Router 설치 및 설정 (0) | 2021.11.11 |
[Vue.js] Vue.js 설치, 프로젝트 세팅 (0) | 2021.11.09 |
댓글