Vue下载文件请求跨域报错

Question

Vue下载文件请求跨域报错

所用技术栈：springboot+Vue+Minio

Postman请求响应可以或者复制请求地址，浏览器回车也可以响应回来对应的下载文件，但是前端Vue请求报错如下：

Access to XMLHttpRequest at 'http://localhost:3080/file/download?fileName=2023-01-14/9a25196f-a314-4d2e-bffa-69506196ff81.jpeg' from origin 'http://127.0.0.1:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

这个问题是由于 Vue 前端请求与后端接口跨域导致的。

CORS(Cross-Origin Resource Sharing) 是浏览器对跨域请求的安全限制。

解决方案有两种：

在 Spring Boot 后端设置响应头，允许跨域请求。可以在后端代码中添加如下代码：

response.addHeader("Access-Control-Allow-Origin", "*");

这样就可以允许所有的跨域请求。

使用代理，在 Vue 项目的配置文件中配置代理，将前端请求重定向到服务器上。
在 vue.config.js 中配置代理

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

之后在 Vue 中请求后端接口时使用 /api 代替 http://localhost:3080 即可。

配置完成之后，前端访问 /api/file/download?fileName=2023-01-14/9a25196f-a314-4d2e-bffa-69506196ff81.jpeg 就会被重定向到 http://localhost:3080/file/download?fileName=2023-01-14/9a25196f-a314-4d2e-bffa-69506196ff81.jpeg。

请确保你的代理配置是否正确，如果不能解决问题，请检查你的跨域策略是否有误。