el-upload上传文件跨域问题解决

今天下午使用el-upload自带的上传文件时，使用文档中的网址是可以的，换成开发的接口就报错了，发现是option请求，这让我想到了项目的环境vue+axios发送请求模式，网上看了很多文章，要么说改headers，要么说些自定义的上传方法（我用这个就是为了简单、自己去写我还用这个干啥），反正这些都没帮助，后来看了一篇提到使用代理的问题，瞬间惊醒，才发现这个刚搭建的框架没有配置代理，配置代理之后，搞定了，下面记录下配置代理的步骤：

第一步，把config目录下的index.js文件打开，修改proxyTable（就是代理）属性的设置，改成下面这样：

assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://10.73.4.226:6003',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
    },

可以看到中间加入了'/api'属性，这个api是从哪来的呢，请看src/api目录下的拦截器文件（具体名字自己查找），发现里面有这么一行代码：

if (process.env.NODE_ENV === 'development') {
        prefix = '/api/'
    } 

意思就是开发环境下的代码都加上'/api/'的前缀，这样，我们所有发出的请求都可以直接走代理了。

第二步，把el-upload组件的action属性的前面加上'/api/'（当然，是不带域名和端口的链接），为什么呢？因为我们的拦截器拦截的都是axios发送的请求，这个上传组件action地址并没有走axios，所以需要手动添加'/api/'来告诉node我要使用代理了。

最后，直接npm run dev重启，再次选择文件上传，你就会发现可以上传成功了。