之前做vue项目使用element-ui一直在本地和服务器做代理，一直没有注意到 el-upload 组件有跨域问题，突然有一天做了一个本地不做反向代理的项目时，发现只有上传接口会出现跨域问题。最后发现不是接口的问题 ，是el-upload组件自带的跨域问题。
组件代码 如下
<el-upload :action="`/api/UploadFile`" :header="header" :show-file-list="false" :before-upload="headImageBeforeUpload" :on-success="headImageSuccess"> <el-button style="border:none;" class="uploadBtn" size="small" type="primary">上传</el-button> </el-upload>
1.代理
就跟我之前一样，在本地和nginx上配代理就可以解决跨域问题
本地
proxyTable: { ‘/api‘:{ target: `https://xxx.com/`,你要请求的地址 changeOrigin: true, pathRewrite: { ‘^/api‘: ‘/api‘ } } },
nginx
location ^~ /api {
proxy_pass https://xxx.com; 你要请求的地址
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
if ($request_method = OPTIONS ) {
return 200;
}
}
2.自定义上传函数 文档（https://element.eleme.cn/#/zh-CN/component/upload）
可以用element-ui组件的方法
在http-request的function内用formData方式上传/或者可以使用vue-resource走jsonp方法
或者 可以在 before-upload方法内用formData方式上传 之后return
这两种方法的本质是一样的
就是不走el-upload的上传方式