el-upload 使用axios上传文件的问题

Question

我用axios的方式代替了el-upload组件默认的文件上传，调用上传接口时，因为接口调用会首先被登陆验证拦截，检查是否登陆。我点击上传后发现upload接口被调用了两次，一次是option，另一次是get（不是post，非常奇怪），然后提示跨域。
其他get请求的相关接口，均可以通过axios请求时携带cookies来解决，不会出现跨域问题，唯独此处的文件上传有问题。而当我将接口部署到测试环境（无登陆验证），则可以正常工作。
我的代码如下：

<template>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="uploadAction"
      :http-request="myUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :auto-upload="false"
      :with-credentials="true">
      <el-button slot="trigger" size="small" type="primary" icon="el-icon-document">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" icon="el-icon-upload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传<b>apk</b>文件，且文件以“<b>版本号_76</b>”命名<br/>若目标文件已上传过，则此环节可略去</div>
    </el-upload>
</template>

接下来是myUpload的定义：

myUpload(content) {
    var form = new FormData();
    form.append("file", content.file);
    this.$axios.post(content.action, form).then(res=>{
        if(res.data.code != 0) {
            content.onError('文件上传失败, code:' + res.data.code)
        } else {
            content.onSuccess('文件上传成功！')
        }
    }).catch(error=>{
           if (error.response) {
                content.onError('文件上传失败,' + error.response.data);
            } else if(error.request) {
                content.onError('文件上传失败，服务器端无响应')
            } else {
                content.onError('文件上传失败，请求封装失败')
            }
    });
}
            

会收到两次请求：
一次option：

一次get（不是post）：

求问这是为什么？

注：如果没有那一层接口调用前的登陆验证，文件上传是没有问题的

Answer 1

已经发现问题所在了。
我将el-upload组件自身的:with-credentials="true"删掉，就可以正常post了。虽然不懂为啥子……

Answer 2

这是浏览器处理跨域做的逻辑。CORS跨域请求会先发option请求，如果server返回access-control-allow-origin头为*或者和当前域名一致的话，才会进入第二段的真正请求。不然就会报 cross origin request is forbidden错误。

作者：slashhuang
链接：https://www.zhihu.com/questio...
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Answer 3

唉，你被302了啊，肯定是授权卡住你了，要让你去passport啊，上传时候要携带token(具体看验证逻辑跟验证逻辑走)，常见的情况是你没给上传组件传额外的用户token

Answer 4

为什么我参考你这个写报错了呢，content也找不到
TypeError: Cannot read property 'file' of undefined