1. 문제1) cors 문제무선 와이파이 서비스를 제공하는 AP 장비에 클라이언트가 캡티브포탈 브라우저에서 POST 요청을 보내는 상황이었다. 클라이언트의 IP와 AP 서버의 IP가 다르기 때문에 브라우저는 당연히 cors 오류를 내뱉었다.이 문제를 해결하기 위해 별도의 Node.js 서버를 두고 이 서버에 클라이언트가 POST 요청하면 이 요청을 AP 서버로 전달하도록 설계했다. 즉, 클라이언트와 AP 서버  사이에 Proxy 서버를 두어서-브라우저가 다른 도메인으로 요청을 허용하지 않는-cors 정책을 우회하도록 Proxy 서버가 실제 서버에 요청을 대신 보내는 구조를 만든 것이다. 2) axios를 이용한 POST 요청 문제Proxy 서버를 이용해 cors 문제는 잘 해결했다. 그런데 AP 서버의 ..

Axios로 REST API를 연동하고 있다. 로그인 후 새로운 토큰을 받았지만 API호출 시 해당 토큰이 header에 실리지 않아 [그림 1]과 같이 401 에러와 함께 로그인 화면으로 리다이렉션 되어 버렸다. 기존에 interceptors에 response 코드만 적용했었던 것이 문제였다. 따라서 request 할 때 토큰을 실어 보내는 아래의 코드를 추가하여 문제를 해결할 수 있었다. instance.interceptors.request.use( function (config) { console.log('config : ', config) config.headers.Authorization = `Bearer ${localStorage.getItem('jwt')}` return config }, f..

1. CORS 위반 Spring boot로 만들어진 API 서버가 121번으로 시작하는 주소를 가지고 있고, 제작 중인 Vue.js 프로젝트에서 해당 주소로 API를 요청하는데 발생한 에러이다. POST 메서드로 로그인 API를 호출하면 아래와 같은 정보가-잘-날아온다. { "username": "admin", "token": "블라블라", "idx": 1 } 문제는 해당 토큰을 Headers에 실어서 다른 API를 호출하면 어김없이 [그림 1]과 같은 cors 위반 에러가 발생한다는 것이다. CORS(교차 출처 리소스 공유 : Cross-Origin Resource Sharing, CORS)는 브라우저가 담당하는 정책이다. 데이터의 출처가 상이한 경우에 발생한다. 제작 중인 Vue.js 프로젝트는 12..

겸상 팀 프로젝트에서 맡은 화면 및 기능 구현을 거의 마무리하였고 이제 API를 붙이고 있다. 밥상 목록 중 신청한 밥상만 추려서 가져오는 API를 붙이던 중에 경험한 일이다. [그림 1]과 같이 Postman에서는 GET 요청 시 body가 전달되고 원하는 응답을 받을 수 있었다. 하지만 Axios를 통해 요청하면 [그림 2]와 같은 현상이 발생하였다. 이 문제로 많은 시간을 보냈는데 결론은 Axios에서 GET 요청 시에는 body를 보낼 수 없다고 한다. 아래 링크는 참조한 자료이다. https://jacobgrowthstory.tistory.com/44 [Axios] get 요청 시 Query Params 보내기 (에러핸들링) 프로젝트 중 axios를 통해 get 요청 시 에러가 발생했다. req..

| 이슈 file-saver를 이용해 고객사 정보를 영속적으로 관리하는 방법을 적용했으나 데이터의 추가, 삭제가 일어날 때마다 뜨는 탐색기를 조작해야만 된다는 번거로움 때문에 고민이 많았다. 서버 없이 웹으로만 만들어 보고 싶었는데 fs 모듈을 사용하기 위해 결국 Node.js를 사용하게 되었다. Node.js에서 SQlite를 쓰는 것도 생각해 봤었는데, 로컬에서 json 파일을 다루는 정도라면 내장 모듈인 fs로도 충분할 것 같았다. Node.js와 함께 사용한 모듈은 express, fs, cors이다. Vue.js에서는 서버 통신을 하기 위해 axios 모듈을 import 했다. Vue.js component에는 아래와 같이 methods를 추가했다. async getCustomersServer(..

[그림 1]의 data 배열의 값을 사용하고자 했다. 그래서 .data 키로 접근하고자 시도하였으나 "undefined"라는 결과만 출력되었다. 여러 차례 시도해 봤으나 결과는 동일했다. 다시 코드를 찬찬히 살펴보고 있는데 헛웃음이 나왔다. async $get(url) { return await axios.get(url).catch((e) => { console.log(e) }).data } 위 코드와 같이 .data를 catch에다 붙였던 것이다. 그러니 백날 시도해도 "undefined"일 수밖에... async $get(url) { return ( await axios.get(url).catch((e) => { console.log(e) }) ).data }, 위와 같이 코드를 수정하자 [그림 2]..

[그림 1]과 같이 카테고리 데이터를 수정(put)하는 기능을 적용하고 테스트하였는데 문제가 생겼다. 콘솔에 [그림 2]와 같은 오류가 발생하였고, 다음과 같이 node 서버가 강제 중단되었다. PS C:\Users\J\Documents\GitHub\bootcamp\project\server> node .\app.js 서버가 포트 3000번으로 시작되었습니다. Error: ER_PARSE_ERROR: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'NULL where product_category_id='13'' ..

| 개발 동기 매번 워크넷에 들어가 비슷한 검색어를 입력하는 것이 번거로웠다. 스케줄링까지 적용해 매일 정해진 시간에 자동으로 이메일 구직 정보를 받아보는 프로그램을 만들고자 한다. | 개발 목표 워크넷 정보를 크롤링한다. 크롤링된 정보를 개인 메일로 발송한다. 크롤링된 정보를 매일 지정한 시간에 개인 메일로 발송한다. 이상의 기능에 GUI를 적용한다. | 사용 기술 이번에 사용한 모듈은 dotenv, nodemailer이다. dotenv는 깃허브에 이 프로젝트를 커밋, 푸시하더라도 구글로부터 받은 메일 키는 제외되도록 하기 위해 사용하였다. nodemailer는 크롤링된 정보를 개인 이메일로 발송하기 위해 사용하였다. ※ node.js에서 진행한 이번 프로젝트에서 현재까지 사용한 모듈은 axios, c..