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

2023-10-10 10:42:42 +08:00
 ChatGPTPRO

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

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

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

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

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

4128 次点击
所在节点    程序员
41 条回复
liuhuihao
2023-10-10 11:39:16 +08:00
@xiaohundun #18 这个操作应该也是不行的,接口虽然允许跨域,但是这个图片地址的请求没返回 Access-Control-Allow-Origin ,还是不允许跨域的。不允许跨域的图片只能用 img 渲染出来,canvas 也会有跨域问题,我的知识范围内也是不可行的。
liuhuihao
2023-10-10 11:40:29 +08:00
@liuhuihao #21 canvas 能画出来但是跨域的不能调用 toDataUrl 我记得
liuhuihao
2023-10-10 11:43:16 +08:00
@ChatGPTPRO #12 综上所述,自己后台整个 反代解千愁
solobat
2023-10-10 11:46:42 +08:00
实在不行就用 https://deno.dev/ 代理下解决
liuhuihao
2023-10-10 11:47:28 +08:00
我突然间有个疑问,浏览器的同源策略本身是为了防 A 网站非法调用 B 网站的接口,例如 A 网站是个冒牌的银行网站,然后调用 真银行的接口获取用户名密码一类的。

但是反代可以绕过同源策略,A 网站只需要在自己的后台搭一套反向代理去请求 B 网站,一样可以骚操作模拟别的网站哈,感觉 浏览器这个同源策略也是 防君子不防小人哈哈,没啥卵用?
heishu
2023-10-10 11:49:28 +08:00
恕我直言,在座的各位都是~~~~~大佬
realJamespond
2023-10-10 11:50:31 +08:00
用 nodejs 就行了
pkoukk
2023-10-10 11:55:10 +08:00
@liuhuihao #25
同源策略是为了防止你在 A 站使用 B 站的 cookie,localstorage 这些信息。
如果没有同源策略,那么假如用户在 A 站登录了,登录信息在 A 站的 cookie 里,那么你的 B 站就可以直接调 A 站的接口
有了之后,你就算搭了一套反代,B 站想用 A 站的接口,也得让用户在 B 站里,用 A 站的账户密码登录一次,这玩意叫钓鱼网站
7inFen
2023-10-10 11:56:07 +08:00
@liuhuihao 是可以的,所以要提防在陌生网站输入账号密码
sunfkny
2023-10-10 11:56:27 +08:00
这个极狐 GitLab 仓库 https://jihulab.com/weblog/gallery02 不能跨域可以换一个,原始仓库是 https://github.com/myseil/BingWallpaper , 直接移花接木到 github
https://gist.github.com/sunfkny/9855f30e0e9eaaef7b81d67e0c860150
clue
2023-10-10 13:52:42 +08:00
@liuhuihao #25 如果你在浏览器同源策略规则外访问到了跨域数据,那证明这个浏览器有安全漏洞

你说的反向代理问题,浏览器在请求不同域时,cookie 等信息都是完全隔离的。在浏览器这里,站点 A 的请求,只会带上 A 这个域的信息,所以你服务端的代理没任何作用

同源策略本身是定义于浏览器的,HTTP 协议上的 cors 也只是它的延伸,最终服务于浏览器
DOLLOR
2023-10-10 14:17:54 +08:00
@liuhuihao
“同源策略” 的本质是不同应用之间的数据隔离。你把每个网站都看成一个 APP ,各 APP 都只能访问自己的数据,不就显得很天经地义了吗?
所谓 “防 A 网站非法调用 B 网站的接口”,不过是应用数据隔离的附带效果罢了。
unco020511
2023-10-10 14:42:56 +08:00
@liuhuihao #25 你说的是「钓鱼网站」,用户本身是需要在「钓鱼网站」输入账号密码的.浏览器的同源策略是隔离不同 domain 下的 cookie 等信息的,防止另一个网站直接拿你的信息去做请求
leonshaw
2023-10-10 14:50:56 +08:00
@liuhuihao 除了前面几楼所说的防止 A 使用 B 域的浏览器存储,还有一种情形是 A 可能访问不到 B 。例如 B 是一个没有鉴权的内网服务,如果没有同源策略,在公网的 A 就可以利用用户浏览器作跳板访问到 B 的资源。
zuotun
2023-10-10 15:22:00 +08:00
如果只是拿到 bing 壁纸的话, 还有一大堆类似的. 我自己也做了一个(不做存储) https://api.kazusa.cc/bing
至于解决办法, 还是反代最简单.
yangjirun
2023-10-10 15:49:46 +08:00
nginx 代理吧。最简单。
JaaaaackZheng
2023-10-10 17:22:10 +08:00
你的目的只是想将图片转 base64 ?
JaaaaackZheng
2023-10-10 17:22:55 +08:00
https://juejin.cn/post/6844903961141444615 用 canvas 就可以了,canvas 设置跨域就能转。我之前的项目转过
okakuyang
2023-10-10 17:41:30 +08:00
@JaaaaackZheng 跨域的图片转出来是白色的,你最好确认一下你以前的代码哦
lmw2616
2023-10-10 18:00:14 +08:00
request({
method: 'get',
url: 'https://api.likepoems.com/img/bing/',
responseType:'arraybuffer',
success: (res) => {

//图片流转 blob
let imageType = res.header['content-type'];
const blob = new Blob([res.data], { type: imageType })

//blob 转 base64
let oFileReader = new FileReader()
oFileReader.onloadend = function (e) {
//base64 字符串
const base64 = e.target.result
}
oFileReader.readAsDataURL(blob)
}
})

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

https://tanronggui.xyz/t/980531

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

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

© 2021 V2EX