vue 项目 使用el-upload组件上传文件的接口,前缀使用公共的。在公共文件配置会出现跨域问题

跨域问题是由于浏览器的同源策略所引起的，同源策略是浏览器为了保障用户信息的安全而设置的一种限制。如果在vue项目中使用el-upload组件上传文件时，前缀使用了公共的接口，而公共接口与vue项目的域名不同，则会出现跨域问题。

为了解决跨域问题，可以在后端接口中添加跨域允许的配置，或者在vue项目中使用代理来转发请求。具体操作可以参考以下步骤：

1. 在vue项目的配置文件中设置代理，如下所示：

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',  // 这里的地址为公共接口的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''  // 去掉请求地址中的/api前缀
        }
      }
    }
  }
}

2. 在el-upload组件中设置上传的接口为代理地址，如下所示：

<el-upload :action="'/api/upload'" ...>

这样设置之后，el-upload组件发送的上传请求会被代理到公共接口地址，跨域问题得到解决。

相关问题

vue 项目 使用el-upload组件上传文件的接口,前缀使用公共的

如果你想使用Element UI的`el-upload`组件上传文件，你可以在Vue.js项目的公共配置文件中设置`baseURL`，并将其作为`action`属性传递给`el-upload`组件。

以下是一个示例：

<template>
  <el-upload
    class="upload-demo"
    :action="uploadUrl"
    :on-success="handleSuccess"
    :file-list="fileList"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      fileList: [],
      uploadUrl: '/upload'
    };
  },
  methods: {
    beforeUpload(file) {
      // Some validations
    },
    handleSuccess(response) {
      console.log(response.data);
    }
  },
  mounted() {
    axios.defaults.baseURL = 'https://example.com/api';
    this.uploadUrl = axios.defaults.baseURL + this.uploadUrl;
  }
};
</script>

在上面的示例中，我们在Vue.js项目的公共配置文件中设置了axios的`baseURL`为`https://example.com/api`。在组件的`mounted`生命周期中，我们将`uploadUrl`属性设置为`/upload`的完整URL，以便在`el-upload`组件中使用。同时，我们还声明了一些方法来处理文件上传前的验证和上传成功后的响应。