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

[ChatGPTPRO]

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

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

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

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

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

[MrYELiex]

https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

[ChatGPTPRO]

@MrYELiex 阿这阿这

[7inFen]

前端没法处理，postMessage 也是需要源网站配合才可以

[liuhuihao]

源站不是你的不配合的话，无解。考虑非前端的方式吧，比如提前在后台把 重定向的地址跑出来然后返回给前端

[ChatGPTPRO]

@liuhuihao

其实这个图片可以显示出来，那是不是意味着 html 里面就加载了，那是不是 base64 是能拿到的呢。至少说这个图片数据

@7inFen

[xiaohundun]

你用的人家的 API 不是已经提供了一个获取图片信息的接口了么，里面有 url

[xiaohundun]

@xiaohundun https://api.likepoems.com/img/pixiv/?type=JSON

[liuhuihao]

@ChatGPTPRO #5 你最终目的是什么呢？
如果说只是想要在你的页面里嵌入人家的这张图片，iframe 就可以实现正如你所说的可以正常显示。但是你想拿到图片的 base64 啥的在我了解的范围内前端是没法实现的，只能后台实现

[liuhuihao]

@liuhuihao #8 除非对方接触跨域的限制或者提供不限制跨域的接口

[7inFen]

@ChatGPTPRO 图片显示是渲染引擎 WebKit 的工作，不存在跨域；操作 base64 是 js 引擎 V8 的工作，有跨域限制。

[weixiangzhe]

做个反代吧

[ChatGPTPRO]

@xiaohundun 大佬你咋这么强啊

[xiaohundun]

@ChatGPTPRO #12 😰可能你没看 API 主的网站吧，这接口应该还允许跨域，我没试

[676529483]

如果只是显示图片，img 标签不需要跨域

[gogogo2000]

@ChatGPTPRO #5 对浏览器来说确实是获得到了，但是浏览器会限制非同域的脚本，不允许你获得图片的任何信息

[ChatGPTPRO]

@xiaohundun 大佬，确实可以得到真实的图片地址。

```
{
"code": 200,
"url": "https://jihulab.com/weblog/gallery02/-/raw/master/BingImage/2021-06-16/OHR.GBRTurtle_ZH-CN6069093254_UHD.jpg",
"width": 5164,
"height": 2905,
"size": "2386539",
"mime": "image/jpeg"
}
```

但是有个问题，怎么获取这个图片的 base64 呀

[xiaohundun]

@ChatGPTPRO #16 4 楼给你解释过了，虽然 img 可以渲染但是你要请求图片还是会碰到跨域问题，所以后端

[xiaohundun]

@ChatGPTPRO #16 你试下这个，https://stackoverflow.com/questions/46609800/canvas-crossorigin-anonymous-cors-chrile-mac-osx ，说是吧 img 绘制成 canvas 然后再转

[mxT52CRuqR6o5]

跨域图片（如果没加允许跨域的那些 headers ），没做防盗链的话，你可以用 img 加载展示，但你无法获取具体的数据（ ajax 、fetch ）
你想把这个 img 画到 canvas 上都是做不到的
之前甚至有人研究旁路攻击去偷跨域图片内容的操作（ https://www.secrss.com/articles/3102 ，能偷的不止有图片）

[mxT52CRuqR6o5]

@mxT52CRuqR6o5 #19
又回忆了一下，「画到 canvas 上都是做不到的」说的有问题，不是做不到，而是如果把跨域 img 画到 canvas 上，就没法再对这个 canvas 执行 toBlob 、toDataUrl 这种拿到 canvas 画的内容的操作了