vue中a标签跨域时导致download属性失效如何解决

在 Vue 中使用 a 标签的 download 属性进行文件下载时，如果链接的地址跨域，浏览器会自动禁止下载，这是浏览器的安全机制。

为了解决这个问题，可以在服务器端设置响应头，指定允许跨域下载，如下所示：

Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Disposition

其中，Access-Control-Allow-Origin 表示允许跨域请求的域名，可以使用 * 表示所有域名；Access-Control-Expose-Headers 表示允许前端获取的响应头，这里需要指定 Content-Disposition，以便浏览器识别下载文件。

在 Vue 中，可以使用 axios 发送请求时设置 withCredentials 为 true，以允许跨域请求带上 cookies，如下所示：

axios({
  url: 'http://example.com/file.zip',
  method: 'get',
  withCredentials: true,
}).then(response => {
  // 处理响应数据
})

然后，将下载链接放在一个按钮或者其他元素上，使用 JS 动态触发点击事件进行下载，如下所示：

const a = document.createElement('a')
a.href = 'http://example.com/file.zip'
a.download = 'file.zip'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

这样就可以通过 JS 动态触发点击事件，实现跨域下载文件，并且保证 download 属性生效。