vue 关于 axios cors token验证的坑

最近做了项目迁移，由于之前的版本不是本人开发，在接口调用的时候接二连三地报403，要不就是200没有response。经过代码细读，发现这个项目除了登录，其余的接口统统需要使用token,这里就用到了请求拦截器向header中添加x-access-token和响应拦截器，请求之前由于后端没处理跨域的Access-Control-Allow-Origin: *,前端接到之后浏览器就报错没有返回数据，这里需要jsonp跨域（参考creat方法），然后项目中有的地方需要调用公用接口比如高德的接口，不能用jsonp跨域，说白了就是header中不能有乱七八糟的东西，只能正常调用，接口axios需要重新配置（参考creatNormal），配置完之后响应拦截器的配置也需要改变，因为数据返回的格式也和内部接口不同，内部接口有res.code，外部接口没有，参考响应拦截器中
if(!data.code){
return data
}
还有 Axios.defaults.withCredentials = false;这个事，刚开始被接口整的头晕目眩在网上看有人说传token的时候，值必须是true.我就加上了，结果还是什么都不返回，我去掉之后反而好用了，后来在思否看见下面这段话

withCredentials的情况下，后端要设置Access-Control-Allow-Origin为你的源地址，例如http://localhost:8080，不能是*，而且还要设置header(‘Access-Control-Allow-Credentials: true’);

我的项目后端设置的是*,没办法了，只能jsonp跨域了

下面上代码，有何高见求指教，省一行代码是一行

import Axios from ‘axios’
import util from ‘@/common/util.js’
// Axios.defaults.withCredentials = true;
class httpRequest {
constructor () {
this.options = {
method: ‘’,
url: ‘’
}
// 存储请求队列
this.queue = {}
}

// 销毁请求实例
destroy (url) {
delete this.queue[url]
const queue = Object.keys(this.queue)
return queue.length
}

// 请求拦截
interceptors (instance, url) {
// 添加请求拦截器
instance.interceptors.request.use(config => {
if (!config.url.includes(‘api/login’) && !config.url.includes(‘restapi’)) {
config.headers[‘x-access-token’] = util.getCookie(‘loginToken’)
}
// Spin.show()
// 在发送请求之前做些什么
return config
}, error => {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
instance.interceptors.response.use((res) => {
const { data } = res
if(!data.code){
return data
}
if (!(data instanceof Blob)) {
if (data.code !== 200) {
// 后端服务在个别情况下回报201，待确认
if (data.code === 401 ) {
util.deleteCookie(‘loginToken’)
window.location.href = ‘/’
}
if (data.code === 202) {
this.KaTeX parse error: Expected 'EOF', got '}' at position 36: …ata) }̲ retu…message.error(‘服务内部错误’)
// 对响应错误做点什么
return Promise.reject(error)
})
}

// 创建实例
create () {
const conf = {
baseURL: ‘’,
headers: {
Accept: ‘application/json, text/plain’,
‘Content-Type’: ‘application/json; charset=utf-8’,
‘X-URL-PATH’: location.pathname
}
}
// Axios.defaults.withCredentials=true
return Axios.create(conf)
}

// 创建正常实例
createNormal () {
const conf = {
baseURL: ‘’,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’,
}
}
// Axios.defaults.withCredentials=true
return Axios.create(conf)
}

// 传token请求实例
request (options) {
var instance = this.create()
this.interceptors(instance, options.url)
options = Object.assign({}, options)
this.queue[options.url] = instance
return instance(options)
}
// 正常请求实例
requestNormal (options) {
var instance = this.createNormal()
this.interceptors(instance, options.url)
options = Object.assign({}, options)
this.queue[options.url] = instance
return instance(options)
}
}
export default httpRequest