在element中upload上传文件中,直接把调用方法写在action中是造成跨域的根源,解决方法就是重写upload+proxyTable.changeOrigin = true.

 

upload中,使用:http-request代替action

<el-form-item label="上传模板只能zip文件"  style="width: 550px;"><!-- TemplateData.FileId -->
      <el-upload
           class="avatar-uploader put"
            action="upload"
            :http-request="handleUploadFile"
            accept=".zip"
            :data = "{dir: 'B2BInfo'}"
            :show-file-list="true"
            :on-success="ziphandleAvatarSuccess"
            :before-upload="zipbeforeAvatarUpload">
            <i class="el-icon-plus avatar-uploader-icon"></i>
     </el-upload>
</el-form-item>
        // 重写文件上传方法
        handleUploadFile (params) {
            axios({
                method: 'post',
                url: '/templateApi/UploadTemplate/UploadFile/',
                headers: {'Content-Type': 'application/json'},
            })
        },

然后找到config/index.js,修改proxyTable下的changeOrigin为true,true代表允许跨域。关于proxyTable,可以查看文章:

https://blog.csdn.net/qq_41566366/article/details/107382533

    proxyTable: {

       '**/*': {
        target: 'http://loc-admin.114my.com/',
        changeOrigin: true,
            filter: function (pathname, req) {
             if(pathname.indexOf('/api') == 0){
               return true;
             }
             return pathname.match('^/[^static|_|content].*$') || pathname.match('^/api/.*?$')
            }
      },
      '/templateApi':{
              target: 'http://loc-dynamicsite.114my.com:8086/api/',
              changeOrigin: true,
              pathRewrite:{  // 路径重写,
                '^/templateApi': '' 
              }

        }, 
    },

 

Logo

前往低代码交流专区

更多推荐