springboot vue 跨域下载本地文件

可以使用axios库发送GET请求，设置responseType为'blob'，然后使用window.URL.createObjectURL创建一个下载链接，最后使用a标签模拟点击下载即可。以下是示例代码：

axios({
  method: 'get',
  url: 'http://localhost:8080/download',
  responseType: 'blob'
}).then(res => {
  const url = window.URL.createObjectURL(new Blob([res.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.txt');
  document.body.appendChild(link);
  link.click();
});

注意：需要在后端设置允许跨域访问。

相关问题

springboot vue 跨域 下载本地文件

可以通过设置后端的跨域配置来解决这个问题。在 Spring Boot 中，可以使用 @CrossOrigin 注解来实现跨域访问。同时，前端也需要在请求头中添加 Access-Control-Allow-Origin 字段来允许跨域访问。具体实现可以参考以下代码：

后端代码：

@RestController
public class FileController {

    @GetMapping("/download")
    @CrossOrigin(origins = "*", maxAge = 3600)
    public ResponseEntity<Resource> downloadFile() {
        // 下载本地文件的代码
        // ...
        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getName() + "\"")
                .body(resource);
    }
}

前端代码：

axios({
    method: 'get',
    url: 'http://localhost:8080/download',
    responseType: 'blob',
    headers: {
        'Access-Control-Allow-Origin': '*'
    }
}).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.pdf');
    document.body.appendChild(link);
    link.click();
});

注意：这里的代码只是一个简单的示例，实际应用中需要根据具体情况进行修改。

springboot vue 前后端分离项目部署

Spring Boot 和 Vue.js 结合的前后端分离项目部署通常涉及以下几个步骤：

1. **构建前端**：
- 使用 Vue CLI 或手动构建，先将Vue应用打包成静态文件，生成dist目录下的文件。

2. **配置 Spring Boot**：
- 创建一个基本的Spring Boot项目，添加对Spring Web、Spring MVC的支持。
- 如果有需要，可以集成如Nginx作为反向代理服务器，处理跨域请求。

3. **整合前后端**：
- 将前端生成的dist文件夹结构放到Web项目的static目录下。
- Spring Boot应用中配置静态资源映射（`@CrossOrigin`或`WebMvcConfigurer`），使得浏览器可以直接访问前端文件。

4. **启动服务**：
- 运行Spring Boot应用，它会监听指定端口，同时提供API供前端调用。

5. **部署**：
- 可以选择本地开发环境运行，例如通过IDEA内置服务器；
- 对于生产环境，可以选择云服务如AWS、阿里云或腾讯云，部署到容器（Docker）中，然后通过负载均衡或弹性伸缩服务分配流量。

6. **监控和日志**：
- 部署后要设置好健康检查和错误监控，以便及时发现并解决问题。