第一步vue开发配置
module.exports = {
devServer:{
host: 'localhost',
port: 8080,
https: false,
open: true,
proxy: {
'/api': {
target: 'http://appserver.fecshoptest.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
第二步 axios拦截器
// 引用API文件
import api from './config/api'
Vue.prototype.$http = axios
Vue.prototype.qs = qs
// Vue.prototype.store = store
// 添加一个请求拦截器
// sessionStorage.setItem('access_token', 'lycovV39qrJUW5vsKs58vVQa30EcQESZ')
axios.interceptors.request.use(
config => {
config.baseURL = '/api'
// config.baseURL = 'http://appserver.fecshoptest.com'
config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
config.timeout = 6000
const token = sessionStorage.getItem('access_token')
// const token = store.state.token
console.log('++请求查询本地保存++access_token++' + sessionStorage.getItem('access_token'))
console.log('++请求查询保存的++stortoken' + store.state.token)
// const csrf = store.getters.csrf
if (token) {
config.headers = {
'access-token': token,
'Content-Type': 'application/x-www-form-urlencoded',
'fecshop-currency': 'USD',
'fecshop-lang': 'zh'
}
}
if (config.url === 'refresh') {
config.headers = {
'refresh-token': sessionStorage.getItem('refresh_token'),
'Content-Type': 'application/x-www-form-urlencoded'
}
}
// 参数格式转换
if (config.method === 'post') {
config.data = qs.stringify(config.data)
}
return config
},
error => {
return Promise.reject(error)
}
)
// 在 response 拦截器实现
axios.interceptors.response.use(
response => {
console.log('++返回时本地保存的++access_token++' + sessionStorage.getItem('access_token'))
console.log('++返回时本地保存的++stortoken' + store.state.token)
console.log('++返回时头部的accesstoken++' + response.headers['access-token'])
if (response.data.code === 200) {
sessionStorage.setItem('access_token', response.headers['access-token'])
store.commit('setToken', response.headers['access-token'])
}
console.log('++返回后第二次确认本地保存的++access_token++' + sessionStorage.getItem('access_token'))
console.log('++返回后第二次确认+stortoken' + store.state.token)
return response
},
error => {
return Promise.reject(error)
}
)
操作结果
第一次登录请求 从http://localhost:8080/#/login post请求 /customer/login/account登录成功
返回结果如下
++请求查询本地保存++access_token++null
main.js?56d7:26 ++请求查询保存的++stortokenundefined
main.js?56d7:55 ++返回时本地保存的++access_token++null
main.js?56d7:56 ++返回时本地保存的++stortokenundefined
main.js?56d7:57 ++返回时头部的accesstoken++I3y77YP9Gz_HwHWgq94dsGA3C3tYJEvA
main.js?56d7:62 ++返回后第二次确认本地保存的++access_token++I3y77YP9Gz_HwHWgq94dsGA3C3tYJEvA
main.js?56d7:63 ++返回后第二次确认+stortokenI3y77YP9Gz_HwHWgq94dsGA3C3tYJEvA
一切正常，返回时头部的accesstoken++I3y77YP9Gz_HwHWgq94dsGA3C3tYJEvA
第二次从http://localhost:8080/#/table get请求 /cms/home/index
返回的结果如下，查询结果也是正确的
++请求查询本地保存++access_token++I3y77YP9Gz_HwHWgq94dsGA3C3tYJEvA
main.js?56d7:26 ++请求查询保存的++stortokenI3y77YP9Gz_HwHWgq94dsGA3C3tYJEvA
main.js?56d7:55 ++返回时本地保存的++access_token++I3y77YP9Gz_HwHWgq94dsGA3C3tYJEvA
main.js?56d7:56 ++返回时本地保存的++stortokenI3y77YP9Gz_HwHWgq94dsGA3C3tYJEvA
main.js?56d7:57 ++返回时头部的accesstoken++undefined
main.js?56d7:62 ++返回后第二次确认本地保存的++access_token++undefined
main.js?56d7:63 ++返回后第二次确认+stortokenundefined
问题出现在这里
返回时头部的accesstoken++undefined
也就是第二次查询时返回的头部信息中没access-token
就是这个语句，response.headers['access-token']没有被定义，请问这个问题要从那里入手解决