跨域问题 用blob解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://static.woshipm.com/woshipm_api_def_20230111132230_6971.jpeg?imageView2/0/w/200">xiazai</a>
<script>
function download(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = "blob"
xhr.send();
xhr.onload = function () {
const fileBolb = xhr.response
console.log("🚀 ~ file: 不同域名下载图片变成预览图片.html:20 ~ download ~ fileBolb", fileBolb)
const fileUrl = URL.createObjectURL(fileBolb)
console.log("🚀 ~ file: 不同域名下载图片变成预览图片.html:23 ~ download ~ fileUrl", fileUrl)
const elementA = document.createElement('a')
elementA.setAttribute('href', fileUrl)
document.body.appendChild(elementA)
elementA.innerHTML = '下载'
elementA.setAttribute('download', '')
elementA.click
}
}
download('https://static.woshipm.com/woshipm_api_def_20230111132230_6971.jpeg?imageView2/0/w/200')
</script>
</body>
</html>
网友评论