vue3 上传文件时解决跨域问题

• 服务器端配置 CORS

确保后端服务器允许跨域请求。可以在服务器的响应头中添加 CORS 相关的头信息。

以 Node.js 和 Express 为例：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

app.post('/upload', (req, res) => {
    // 处理文件上传逻辑
    res.json({ message: 'File uploaded successfully' });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});
 

• 使用代理服务器

在开发环境中，可以通过配置开发服务器的代理功能，将请求代理到后端服务器。这样浏览器认为请求是同源的。

在 Vue CLI 项目中，可以在 vue.config.js 中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://example.com', // 后端服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};
 

• 使用第三方库

有一些第三方库可以帮助处理文件上传并且支持跨域请求，比如 axios。配置 axios 时可以指定 withCredentials 选项：

import axios from 'axios';

const formData = new FormData();
formData.append('file', file);

axios.post('https://example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  withCredentials: true // 允许携带cookie等信息
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});
 

• 使用nginx配置反向代理

如果你使用 nginx 作为服务器，可以通过配置反向代理来解决跨域问题：

server {
    location /api/ {
        proxy_pass https://example.com/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
 

• 在 Vue 3 中实现文件上传：

<template>
  <div>
    <input type="file" @change="uploadFile" />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('File uploaded successfully', response.data);
      }).catch(error => {
        console.error('Error uploading file', error);
      });
    }
  }
};
</script>