请教前端大佬：一个很蛇皮的跨域问题

打开这个地址： https://api.likepoems.com/img/bing/

它会自动跳转到一个图片的地址，然后可以看到浏览器 url 变化了。

我想在代码中先 axios 请求这个地址，获取到真实的图片地址以及 base64 ，但是它报跨域了。这个地址是网上公共的，所以走允许跨域是走不通。

在代码中直接用 window.open("https://api.likepoems.com/img/bing/") 这个方式是可以成功打开这个地址且显示图片的。

我也想过用浏览器父子窗口通信的方式来获取上述需要的信息，但是也没解决。

YuJianrong

2023-10-12 04:29:18 +08:00

@JaaaaackZheng 当你在一个 Canvas 里用 DrawImage 绘制一非同源又没有 CORS 的图片的时候，这个 Canvas 会处于“被污染”（ tainted ）状态了。处于“被污染”状态的 Canvas 这些调用将会抛错：
* Context 上的 getImageData()
* Canvas 上的 toBlob(), toDataURL() 和 captureStream()
这样来防止比如 OP 这种想抓图片内容的做法。

详情： https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#security_and_tainted_canvases

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/980531

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.