전체 글118 "Access to XMLHttpRequest at ... has been blocked by CORS policy" 오류 해결 방법 Axios로 API Server에 접근했을 때 발생하는 오류 상황 Frontend 프로젝트인 Vue 프로젝트와 Backend 프로젝트인 Spring Boot 프로젝트를 연동한 후, 화면에서 정상 동작 여부를 확인하는 중에 발생한 오류입니다. 실제로 다수 발생하는 상황인지 구글링해보니 많은 해결책이 있었습니다. 안내되는 오류 메세지를 텍스트로 써보자면 아래와 같습니다. Access to XMLHttpRequest at '경로경로~~' from origin '경로경로~~' has been blocked by CORS policy 원인 기본적으로 브라우저에서는 보안상의 이유로 CORS를 제한하고 있어 발생하는 오류입니다. * CORS란? Cross-Origin Resource Sharing (교차 출처 리소스.. 2023. 2. 9. "'response' is defined but never used" 오류 해결 방법 Aixos 설치 후 뷰 컴포넌트 파일에 예시코드 적용 후 빌드시 발생한 오류 상황 Backend와 REST API로 통신하기 위해 Axios를 추가 설치하고 vue.confi.js 파일에 관련 설정을 하였습니다. 연동 테스트를 하기 위해 아래 코드를 추가하고 빌드하니 오류가 발생하였습니다. 위 코드를 적용한 후, 구동하기 위해 'npm run serve'를 터미널 명령어로 치는 순간 아래와 같이 많은 오류가 발생하였습니다. ▶ 터미널 (Terminal) 더보기 ERROR Failed to compile with 25 errors 오후 2:38:20 [eslint] C:\Users\SYP\Git\toyproject\frontend\web-app-admin\src\components\user-web\noti.. 2023. 2. 8. 뷰(Vue.js) 프로젝트에 뷰 액시오스(Vue Axios) 설치하기 프론트엔드로 뷰(Vue.js)를, 백엔드로 스프링부트(Spring Boot)를 개발하면서 두 환경을 연동하기 위해 'Axios'를 설치해야 합니다. 뷰 Axios는 뷰에서 권고하는 HTTP 통신 라이브러리로 npm에서 설치할 수 있도록 지원하고 있어 npm 명령어를 통해 설치 및 연동하였습니다. 뷰 액시오스 (Vue Axios) Axios는 Promise 기반의 HTTP 통신 라이브러리입니다. 뷰 액시오스(Vue Axios) 설치 VSCode에서 Vue Axios를 설치하는 과정입니다. 1. 설치한 VSCode에서 터미널(Terminal) 창을 엽니다. 방법: 키보드: Ctrl + Shift + ` 마우스: VSCode 상단의 Terminal 클릭 > New Terminal 클릭 2. Axios 설치 명.. 2023. 2. 7. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - Root/상위 컴포넌트 화면 기능 개발 오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판 기본(테이블) 화면의 기능을 구현하는 과정입니다. Spring Boot로 구현한 REST API를 통해 DB 데이터를 조작하는 과정은 별도의 포스팅에서 다룰 예정입니다. 공지사항/게시판 구현하기 - 기본(리스트/테이블) 화면 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 기본(테이블) 화면 기능 개발 [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 상세 화면 기능 개발 [실습] 뷰(Vue.js)로 관리자/직원 전용 Web Application 개발하기 - 메뉴에 공지사.. 2023. 2. 6. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 상세 화면 기능 개발 오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판 상세 화면의 기능을 구현하는 과정입니다. Spring Boot로 구현한 REST API를 통해 DB 데이터를 조작하는 과정은 별도의 포스팅에서 다룰 예정입니다. 공지사항/게시판 구현하기 - 상세 화면 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 상세 화면 UI, 레이아웃(Layout) 구현하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 공지사항 상세 화면의 레이아웃이 구성되는 것을 확인하실 수 있습니다. ▶ 초기 화면, OK 버튼 클릭한 경우 ▶ Reg.. 2023. 2. 3. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 기본(테이블) 화면 기능 개발 오늘의 Vue.js 실습 목표는 "공지사항/게시판 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 공지사항/게시판 기본(테이블) 화면의 기능을 구현하는 과정입니다. Spring Boot로 구현한 REST API를 통해 DB 데이터를 조작하는 과정은 별도의 포스팅에서 다룰 예정입니다. 공지사항/게시판 구현하기 - 기본(리스트/테이블) 화면 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 공지사항/게시판 구현하기 - 기본(리스트/테이블) 화면 UI, 레이아웃(Layout) 구현하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 공지사항 기본(리스트, 테이블) 화면의 레이아웃이 구성되는 것을 확인하실 수 .. 2023. 2. 2. Vue와 스프링부트(Spring Boot) 연동/연결하기 Vue와 Spring Boot 연동/연결하기 Vue와 Spring Boot를 연동하는 방법은 크게 2가지가 있습니다. Spring Boot 프로젝트 내에 Vue 프로젝트를 생성하는 방법 하나의 프로젝트로 관리할 수 있음 (작업은 분리해서 할 수 있음) Vue 프로젝트의 빌드 결과를 Spring Boot 프로젝트의 특정 위치에 위치시켜두는 방법 Frontend와 Backend 프로젝트를 분리해서 관리할 수 있음 구글링해보면 1번 방법이 대부분이나 저는 프로젝트를 분리하여 관리하고 싶기 때문에 2번 방법으로 진행하였습니다. 본 포스팅 또한 2번 방법을 진행하는 방법에 대해 작성되어 있습니다. 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실.. 2023. 2. 1. 이전 1 ··· 5 6 7 8 9 10 11 ··· 17 다음
