koa2 vue antd upload上传跨域问题

在使用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,
 },

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gzjiert

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值