search

besscroft / PicImpact

PicImpact 是一个摄影师专用的摄影作品展示网站，基于 Next.js 开发。今天又是想当二次元摄影高手的一天呢！
https://pic.besscroft.com
MIT License
610 stars 86 forks source link

首页预览 URL 优化 #87

Closed Zheaoli closed 2 months ago

Zheaoli commented 2 months ago

目前的格式是这样

https://photos.manjusaka.me/_next/image?url=https%3A%2F%2Fimage.r2.manjusaka.me%2Fpicimpact%2Fimages%2Fpreview%2FDSC_4981.jpg&w=3840&q=25

本质上是用 Next 的 Backend Server 代理了一层，有这样一些问题

  1. CDN cache 不亲和
  2. 容易使防盗链设置失效，（比如我的规则是这样 (not http.referer contains "manjusaka.me" and http.host contains "image.r2.manjusaka.me" and not http.referer contains "manjusaka.blog" ) ，而 next backend 直接请求的话，就会 403 导致首页渲染白屏
besscroft commented 2 months ago

感谢您的反馈，我大概明白你的意思了，我去社区找一下解决方案。

besscroft commented 2 months ago

测试了一下预览的图片 Cf-Cache-Status 为： DYNAMIC，而详情页的是：HIT，根据Cloudflare缓存文档来看确实是没有命中。不知道是不是我测试不够严谨，但测下来发现缓存行为确实没生效。似乎已经是社区争论了很久的问题，next/image挺好用，性能也尚佳，但是配置不够灵活，解决不了的话我会尝试采用其它方案。

besscroft commented 2 months ago

关于CORS 策略，拿我自己的站点测试来说，根据配置跨域资源共享 (CORS)配置后是正常的： image 这个我没有复现出来，我猜测是否配置了规则里面的Origin Rules，有的话可以提供一下详细信息，最好是截图。

Zheaoli commented 2 months ago

关于CORS 策略，拿我自己的站点测试来说，根据配置跨域资源共享 (CORS)配置后是正常的： image 这个我没有复现出来，我猜测是否配置了规则里面的Origin Rules，有的话可以提供一下详细信息，最好是截图。

这个其实不是 CORS 的问题

是 CF WAF 策略的问题，这里利用 WAF 能够更好的减少流量的费用