解决Antd使用upload组件上传文件，使用action上传时跨越的问题

解决Antd使用upload组件上传文件，使用action上传时跨越的问题

问题描述

使用antd的upload处理图片上传场景，根据官方文档只需要定义好action、list-type、change事件就可以，其他大部分的页面效果组件都可以直接实现，比如打开本地文件系统，点击加载图片并上传到指定的远程服务器，但是如果此时远程由于CORS拒绝访问该怎么处理呢？

想要快速解决该问题的小伙伴可以跳过问题分析，直接参考解决过程

问题分析

跨域问题的出现其实就是前后端没有沟通好联系方式，打开谷歌调试工具的网络功能，先看一下接口预处理的报文（CORS在非简单请求时先进行预处理），因为接口预处理这部分是项目中配置好的，也就是不会出现跨域问题，而上传图片时采用的是Upload内置好的请求方式，upload并不关心你的项目里是怎么处理跨域的，所以在预处理之后很容易由于a-upload的请求头配置出现问题。

解决过程

拿到预处理请求的响应报文，观察报文头部的Access-Control-Allow-Headers，这个表示服务端返回的跨域请求中允许出现的请求头配置，如果上传了服务端不支持的配置就会报错，比如预处理响应中服务端返回了Access-Control-Allow-Headers:Content-Type，但是Upload组件的默认上传图片的请求头中有X-Requested-With:XMLHttpRequest 这个就是导致跨域失败的罪魁祸首！
删掉请求头中的X-Requested-With，尽管这个请求头是用来表示异步ajax请求的，但是为了成功跨域，需要使用Upload的headers属性，并且赋一个null值
在Upload组件中直接设置header时属性即可

headers: {
    X-Requested-With: null
}

还有一个需要注意的问题，如果页面访问使用的是https协议，那么Upload组件中的action值也需要是一个https协议，不然也会报错。