axios在跨域请求的前提下在请求头中加入token

Question

我在vue 配合 axios开发项目的时候, 与后台交互采用的是跨域请求数据的方式交互。需求是要在请求头中加入token在后台校验，
但是我在像请求头中添加token的时候，请求直接报错， 说

Request header fidld token is nor allowed by Access-Control-Allow-Headers in preflight response

我在vue的mian.js中配置axios的请求头

axions.default.headers.common['token']='aaa'

请问如何正确的在请求头中添加token? 如果我的这个方法是正确的, 这个报错的问题怎么解决?

Answer 1

这是后端的Access-Control-Allow-Headers不允许你提交token这个头。

要改下后端的cors返回值

Answer 2

你使用的这种方式加不上。
下面是我使用的方式
import axios from 'axios';
import {Message} from 'element-ui';

// 创建axios实例
const fetch = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
});

// request拦截器
fetch.interceptors.request.use(config => {
// 让每个请求携带token--['token']为自定义key
var token = '1111';
Object.assign(config.headers, { 'token': token });
return config;
},error =>{
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
});

// respone拦截器
fetch.interceptors.response.use(
response => response,
error =>{
console.log('err' + error);// for debug
Message({

message: '服务器繁忙，请稍后重试',
type: 'error',
duration: 5 * 1000

});
return Promise.reject(error);
});

export default fetch;