vue2.5+中手动刷新页面axios.interceptors.request.use不自动添加token出现跨域

前端  /  管理员 发布于 3年前   1905

问题：

后台管理系统的异步请求中，正常点击请求可以自动添加token，一旦手动F5刷新页面，直接不进入拦截器里面了

环境：node+vue

"dependencies": {
    "axios": "^0.21.1",
    "element-ui": "^2.15.6",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.6.2"
},

原因：

我把axios，拦截器 响应器都放在main.js里面，需要移除来

进入步骤

1.src下面新建文件夹utils，文件名称axios.js

import axios from 'axios'
import router from '../router'

//axios.defaults.withCredentials = true

export const request = (config) => {
  return axios(config)
}

// 请求前设置header  添加请求拦截器，在请求头中加token
axios.interceptors.request.use(
  config => {
    if (localStorage.getItem('token')) {
      config.headers.Authorization = localStorage.getItem('token')
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 请求完成后 拦截器 token过期或失效处理
axios.interceptors.response.use(
  response => {
    console.log(response)
    return response
  },
  error => {
      // 获取错误状态码，token失效
      // 清除token
      localStorage.removeItem('token')
      // 重新跳转到login页面
      router.push('/login')
  }
)

export default axios

2.在把/utils/axios引入到main.js里面   注意加载顺序

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import axios from './utils/axios'
Vue.prototype.axios = axios

Vue.use(ElementUI)

import '@/styles/index.scss'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

看看效果图：

现在手动刷新都会自动加token头了

ps:

由axios.defaults.withCredentials = true引起的跨域错误可以直接注销掉；

如果前端设置withCredentials的状况下，后端要设置Access-Control-Allow-Origin为你的源地址，

例如

http://localhost:8080，不能是*，
并且还要设置 
header(‘Access-Control-Allow-Credentials: true’);

另外，Access-Control-Allow-Origin设置为*，时cookie不会出如今http的请求头里

因此报错里说Access-Control-Allow-Origin不能是*。