vue设置请求头报 Request header field xfilesize is not allowed by Access-Control-Allow-Headers

import axios from 'axios'
import Qs from 'qs'

const baseURL = 'http://test.dc.cszysoft.com:8089'
const Evaluation = 'http://test.dc.cszysoft.com:19417'

axios.defaults.baseURL = baseURL
axios.defaults.timeout = 5000;  //设置超时时间
axios.defaults.withCredentials = true;

axios.defaults.headers = { 'Content-Type': 'application/x-www-form-urlencoded' };

const authenticationCode = sessionStorage.getItem("authenticationCode")
axios.interceptors.request.use(
  config => {
    // do something before request is sent

    config.headers['authenticationCode'] = authenticationCode
    console.log('config', config)
    return config

  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

 

一、问题：
跨域请求中包含自定义header字段时，浏览器console报错。

Request header field xfilesize is not allowed by Access-Control-Allow-Headers

二、原因：
包含自定义header字段的跨域请求，浏览器会先向服务器发送OPTIONS请求，探测该服务器是否允许自定义的跨域字段。

如果允许，则继续实际的POST／GET正常请求，否则，返回标题所示错误。

 第4行为向服务器询问是否支持跨域的自定义header字段，服务器需要适当的应答。

 

Access-Control-Request-Headers

三、解决办法：

服务端需要对OPTIONS请求做出应答，应答header中包含 Access-Control-Allow-Headers，且值包含options请求中Access-Control-Request-Headers的值。

前端fetch请求如下：