VUE 프로젝트axios 요청 헤더에서 Content-Type 작업 변경

나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.

const httpServer = (opts, data) => {
 const token = localStorage.getItem('token')
 const PUBLIC = `?token=${token}`
 let httpDefaultOpts = ''
 var host = `${process.env.HOST}`
 var prot = `${process.env.PORT}`
 var base = host +(prot?":"+prot:"")
 if (opts.method === 'post') {
 httpDefaultOpts = {
  method: opts.method,
  url: `${base}${opts.url}${PUBLIC}`,
  	headers:{
				'Content-Type':'application/text/html;charset=utf-8' // 
			},
  data: data
 }
 } else {
 httpDefaultOpts = opts
 }

 return new Promise(function (resolve, reject) {
 Axios(httpDefaultOpts).then(
  (res) => {
  successState(res)
  resolve(res)
  }
 ).catch(
  (err) => {
  errorState(err)
  reject(err)
  }
 )
 })
}

추가 정보: 서버에서 반환된 AuthorizationToken 정보를 가져오고 저장하며 요청마다 token을 추가합니다.
백엔드는 jwt의 token으로 신분 권한 검증을 하기 때문에 백엔드는 로그인한 후에 token을 응답 헤더에 추가합니다. 따라서 백엔드는 이 token을 저장하고 매번 요청한 요청 헤더에 token을 추가해야 서버에서 token을 획득하여 신분 인증을 할 수 있습니다.
프론트에서 vue 프로젝트를 사용합니다.
loging.vue(로그인 구성 요소)

{
 submitForm(formName) {
 this.$axios
 .post('/api/admin/login', {
 userName: this.ruleForm.userName,
 password: this.ruleForm.password
 })
 .then(successResponse => {
 this.responseResult = JSON.stringify(successResponse.data)
 this.msg = JSON.stringify(successResponse.data.msg)
 if (successResponse.data.code === 200) {
 this.msg='';
 localStorage.setItem('userName',this.ruleForm.userName);
 // AuthorizationToken 
 var authorization=successResponse.headers['authorization'];
 localStorage.setItem('authorization',authorization);
 // 
 this.$router.push('/dashboard');
 
 }
 })
 .catch(failResponse => {})
 }
 }

main.js(전역 구성 js):

// vue 
axios.interceptors.request.use(function (config) {
 let token = localStorage.getItem('authorization');
 if (token) {
 config.headers['Authorization'] = token;
 }
 return config;
})

여기에 토큰이 기한이 지나면 효력을 잃는 문제도 고려해야 하며, 블로거들은 다음에 따로 블로그를 써서 보충할 것이다.
상기 VUE 프로젝트 axios 요청 헤더에서 Content-Type 변경은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.