vue 下载图片报Access-Control-Allow-Origin' header问题

在Vue中下载图片时出现"Access-Control-Allow-Origin"头问题，这是由于浏览器的同源策略所导致的。同源策略要求网页只能请求同源（协议、域名、端口号都相同）的资源，而不能直接请求其他域名下的资源。

解决这个问题的方法有两种：
1. 在后端服务器上设置响应头，允许跨域访问。在服务器端的响应中添加"Access-Control-Allow-Origin"头，将其值设置为"*"或指定允许访问的域名。例如，在Java Spring Boot中可以使用@CrossOrigin注解来实现跨域访问控制。

2. 使用代理服务器。在Vue项目的配置文件（vue.config.js）中配置代理服务器，将请求转发到后端服务器。这样，前端代码就可以通过代理服务器来请求后端资源，避免了跨域问题。

下面是两种解决方法的示例：

1. 在后端服务器上设置响应头

@CrossOrigin(origins = "http://localhost:8080")
@RestController
public class MyController {
    @GetMapping("/downloadImage")
    public void downloadImage(HttpServletResponse response) {
        // 设置响应头，允许跨域访问
        response.setHeader("Access-Control-Allow-Origin", "*");
        // 下载图片的逻辑
        // ...
    }
}

2. 使用代理服务器
在vue.config.js中添加以下配置：

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

然后在Vue组件中发送请求时，将请求路径改为代理服务器的路径：

axios.get('/api/downloadImage')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });