koa2 vue antd upload上传跨域问题

在使用antd 的a-upload使用同现跨域
在vue…config.js已配proxy代理且koa后台已配置跨域
另起一个web 服务不用a-upload上传没有出现跨域
koa2 vue antd upload上传跨域问题_第1张图片

在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' 
      }
    },
  },

解决方案
koa2 vue antd upload上传跨域问题_第2张图片

把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,
 },

koa2 vue antd upload上传跨域问题_第3张图片

你可能感兴趣的:(前端,vue.js,javascript,前端)