在Vue端进行添加 abc和reftoken两个参数要素

import axios from 'axios';

Vue.prototype.$http = axios

// 配置请求的跟路径

axios.defaults.baseURL = 'http://10.138.0.9/hx/'

axios.interceptors.request.use(config => {

  // console.log(config)

  config.headers.abc = "ceshi token"

  config.headers.reftoken = "reftoken value"

   // config.headers.userid = window.sessionStorage.getItem('userid')

  // 在最后必须 return config

  return config

})

在php端接收要素参数

<?php

require_once 'init.php';
//====================================================================
//主要用于测试vue request中自定义header 参数，php获取的情况，用于后期JWT token
//====================================================================
 $header_abc=$_SERVER['HTTP_ABC'];  //前端header头中是abc，注意大写
 $header_reftoken=$_SERVER['HTTP_REFTOKEN'];  //前端header头中是reftoken,注意大写
 $res['abc']=$header_abc;
 $res['reftoken']=$header_reftoken;
echo  json_encode($res );

注意点：

1.php端的头部声明要加上这两个参数  header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept,Authorization,token,id,abc,reftoken,HTTP_APPCOOKIE");

2.在vue端，如果header的要素中含有中文会报错：

TypeError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest':  Value is not a valid ByteString.

原因：

• 请求的头信息中不能出现中文或UTF-8码的字符

解决方法：
将该字段进行编码或者加密，使用Base64进行编码 encodeURI() 这个函数