묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
api instance 관련되서 질문드립니다.
안녕하세요. 강사님... 좋은 강의 항상 감사합니다. 다름이 아니라 강의때 배운거 실전에 써먹어보려고 합니다. 아래 코드 처럼 인터셉터에서 access토큰이 만료가 되었을때 refresh 토큰을 통해 새로은 access 토큰을 받아오거든요. 새로은 access 토큰을 세팅한 뒤에 이전에 요청했던 url을 받아서 사용자가 요청했던 화면 끊겨 보이지 않게 이동하도록 하려고 구글에서 검색해서 아래코드처럼 사용해봤습니다. 참고했던 자료에서 axios.create 구성이 비슷해서 토큰을 연장해서 다시 재요청까지는 성공합니다. response에서 데이터도 잘 받아어구요. 그런데 화면의 데이터가 변하지 않습니다. 강의의 메인화면을 페이징 처리해서 계속 불러오는건데 response에서 데이터는 받아왔지만 제대로 화면에 나타나지 않고 있는데요.. 어디부분을 더 수정을 해야할까요? 그리고 error.response.config을 axios의 newInstance를 매배변수로 받았을때 이전 url이 다시 요청되는게 왜 그러는걸까요? 원리가 궁금합니다. 답변 부탁드립니다. 감사합니다. import store from '@/store/index'; import router from '@/routes/index'; import axios from 'axios'; import { saveAuthToCookie, deleteCookie } from '@/utils/cookies'; import { instance as newInstance } from '@/api/index'; axios.defaults.withCredentials = true; export function setInterceptors(instance) { // Add a request interceptor instance.interceptors.request.use( function (config) { // Do something before request is sent // console.log(config); config.headers.Authorization = 'Bearer ' + store.state.token; return config; }, function (error) { // Do something with request error return Promise.reject(error); }, ); // Add a response interceptor instance.interceptors.response.use( function (response) { // Any status code that lie within the range of 2xx cause this function to trigger // Do something with response data return response; }, function (error) { // Any status codes that falls outside the range of 2xx cause this function to trigger // Do something with response error const originalConfig = error.response.config; console.log('originalConfig : ', originalConfig); const status = error.response.status; const message = error.response.data.message; //토큰 만료시 refreshtoken으로 토큰 연장 if (status == 401 && message == 'TokenExpiredError') { axios .post(`${process.env.VUE_APP_API_URL}auth/refreshToken`, {}) .then(function (response) { deleteCookie('til_auth'); saveAuthToCookie(response.data); store.commit('setToken', response.data); // originalConfig._retry = true; originalConfig.headers.Authorization = `Bearer ${response.data}`; return newInstance(originalConfig); }) .catch(function (error) { console.log(error.response); alert('인증이 완료되었습니다. 로그인 해주세요'); //state 삭제 // store.commit('clearUsername'); // store.commit('clearToken'); // //쿠키값 삭제 // deleteCookie('til_auth'); // deleteCookie('til_user'); //refreshtoken 만료 또는 없을때 로그인 화면으로 이동 if (error.response.status == 500) { router.push('/login'); } }); } else if (status == 403) { console.log('403 에러'); alert('권한이 없습니다.'); } return Promise.reject(error); }, ); return instance; }
-
미해결mongoDB 기초부터 실무까지(feat. Node.js)
faker2 axios 질문
axios를 사용하는 것이 postman을 사용하는 것과 똑같다고 하셨는데 User는 왜 axios를 사용하지 않고 생성하신건가요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
axios 기본 설정은 어디에 있나요?
질문이 있습니다. 현재 axios 요청시 앞의 부분이 빠져 있는데 어디에 설정되어 있는지 알려주시면 감사요! axios .post('/api/users', { email, nickname, password, }) .then((response) => { console.log(response); // setSignUpSuccess(true); }) .catch((error) => { console.log(error.response); setSignUpError(error.response.data); }) .finally(() => {}); 2번째 질문:import useInput from '@hooks/useInput'; 에서 @는 어떻게 사용하는건지 좀더 자세하게 설명해주시면 감사요 3번째 질문 저 그리고 강의와 상관없는 질문인데 프론트에서 동시 요청 모듈을 이용해서 100명 1000명이 동시에 url 요청을 날리도록 할수 있나요? 모듈이 있긴 한거 같아요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님 질문이 하나 있습니다.
제로초님의 강의를 필두로 개인 프로젝트를 진행하고있는데(구조가 완전 같습니다.) 백엔드 서버를 따로 만들지 않고 외부 rest api로 데이터를 saga쪽에서 axios로 받으려고 하는데 받아 지지가 않습니다. 혹시 왜 이런지 알 수 있을까요?
-
미해결Vue로 Nodebird SNS 만들기
request 중복
1. login: xhr 과 login: preflight 가 짝을 이루고 있는데 preflight 는 무엇인가요? 왜 자동으로 보내지나요?? 2. 강의와 코드를 똑같이 쳤는데 login 요청이 2번이 동시에 나갑니다.. 왜이러는지 모르겠어요 1. login: xhr 과 login: preflight 가 짝을 이루고 있는데 preflight 는 무엇인가요? 왜 자동으로 보내지나요?? 2. 강의와 코드를 똑같이 쳤는데 login 요청이 2번이 동시에 나갑니다.. 왜이러는지 모르겠어요. 제 생각에는 actions 부분에서 2번이 연속으로 요청되는 것 같은데 잘 모르겠네요..
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
서로 다른 Origin끼리의 axios 사용법
안녕하세요! 지금 강의 따라가면서 axios 사용법을 익히는 중입니다~ 다른 서버에서 돌아가고 있는 php 파일을 axios로 불러오고 싶은데 cors 정책에 걸려서 다음으로 나갈 수가 없어서요..! 서로 다른 서버에서의 axios 사용은 어떻게 하는게 좋을까요?
-
미해결Vue로 Nodebird SNS 만들기
5-3 @nuxt/axios 질문!
갑자기 궁금해졌는데.. 공식문서를 보니까 $axios.$get 을 하더라고요.. 1. $axios.$get 처럼 get 이나 post 에서 $을 왜 안붙이는 거죠? (전체적인 강의에서) 2. $가 자바스크립트에서 , nuxt 에서 정확히 무슨 뜻인지 궁금해요..(검색해봤는데 제대로 설명하는 곳이 없는거 같아요..영어는 잘못하고 ㅠ) 도와주세요
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
axios.get callback 내부에서 this
안녕하세요 강의 잘 듣고 있습니다. 다름이 아니라 axios.get()의 callback 함수의 내부에서 vm.을 사용하셨는데, vm.users가 아니라 this.users를 사용해도 정상적으로 데이터가 들어가고 있습니다. async created(){ await axios.get('https://api.hnpwa.com/v0/news/1.json').then((res) => { console.log(res) this.newses = res.data }).catch((err) => { console.log(err) }) }, 인텔리센스가 띄워주는 타입을 보니 callback 내부의 this와 외부에서의 this가 동일하게 CombinedVueInstance로 잡히는데 혹시 차이점이 있을까요? 아니면 버전업에 따른 수정 사항인지 궁금합니다. 감사합니다.