解決element-ui 上傳組件 el-upload 跨域問題

 

之前做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的上傳方式