在使用antd 的a-upload使用同现跨域
在vue…config.js已配proxy代理且koa后台已配置跨域
另起一个web 服务不用a-upload上传没有出现跨域
在koa中已设置了koa2-cors的跨域配置
app.use(cors({
// 任何地址都可以访问
origin:"*",
maxAge: 5, //指定本次预检请求的有效期,单位为秒。
credentials: true, //是否允许发送Cookie
allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], //设置所允许的HTTP请求方法
allowHeaders: ['Content-Type', 'Authorization', 'Accept'], //设置服务器支持的所有头信息字段
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'] //设置获取其他自定义字段
}))
vue.config.js proxy配置
port: 9070,
host:'127.0.0.1',
hot: true,
proxy: {
'/koa': {
target:'localhost:9000',
ws: false,
changeOrigin: true,
logLevel: 'debug'
}
},
},
解决方案
把headers里的X-Requested-With设置为null
a-upload
<a-upload
name="file"
action="http://localhost:9000/file/upload"
list-type="picture-card"
:file-list="fileList"
accept=".jpg,.png"
@preview="handlePreview"
@change="handleChange"
:headers="headers"
>
<a-button v-if="fileList.length < 1"> <a-icon type="upload" /> 点击上传 </a-button>
</a-upload>
data里
headers: {
'X-Requested-With': null,
},