【Element Ui】vue3中 el-upload 上传文件跨域问题

alikami

于 2024-05-29 14:24:36 发布

阅读量490

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/alikami/article/details/139294747

版权

vite.config.js

    // vite 相关配置
    server: {
      port: 80,
      host: true,
      open: true,
      proxy: {
        "/aaa": {
          target: 'http://xxx:3001', // 转发的地址
          changeOrigin: true,//是否跨域
          // logLevel: "debug",
          // ws:true,             //如果要代理 websockets，配置这个参数
          // secure:false,       // 如果是https接口，需要配置这个参数
          rewrite: (p) => p.replace(/^\/aaa/, ""),  // 重写路径(不需要aaa)
        },

      }
    },

页面

<el-upload
          accept=".pdf"
          :headers="upload.headers"
          :action="upload.url"
      >
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入pdf格式文件。</span>
          </div>
        </template>
</el-upload>


...

// js
import {getToken} from "@/utils/auth"; 

const upload = reactive({
   headers: {
     Authorization: "Bearer " + getToken(),
    'Access-Control-Allow-Origin':'*'
   },
   url: '/aaa/.../...',  // 地址,以aaa打头
});

这样就可以跨域请求了