GitHub Pages加载图片出现strict-origin-when-cross-origin问题求助

问题原因 #

本地live-server运行正常，但GitHub Pages出现该错误，核心是两个问题：

• 相对路径../在GitHub Pages的部署结构下指向错误层级，导致资源请求路径异常，被浏览器判定为跨域
• 不必要的crossOrigin设置触发了额外的跨域检查逻辑

具体修复步骤 #

1. 修正图片路径
   移除路径中的../，根据项目在GitHub Pages的部署结构调整路径：

   • 如果你的GitHub Pages地址是https://clingonboy.github.io/foraccio-0.1.0/，且cardsImg文件夹在仓库根目录，修改createImgFileName函数为：

     function createImgFileName(val, seed, dir = "cardsImg") {
         return `/foraccio-0.1.0/${dir}/${val.toString()}${seed}.jpg`;
     }
     

   • 如果HTML文件和cardsImg文件夹在同一层级（比如都在根目录），可以直接用相对路径：

     function createImgFileName(val, seed, dir = "cardsImg") {
         return `${dir}/${val.toString()}${seed}.jpg`;
     }
     

2. 移除crossOrigin属性设置
   图片属于GitHub Pages同域资源，不需要设置跨域属性，删除这一行代码：

   tempCard.imgCard.setAttribute('crossOrigin', 'same-origin');
   

3. 验证资源路径
   检查GitHub仓库中cardsImg文件夹的位置，确保图片文件名（比如1B.jpg等）和代码生成的路径完全匹配，注意GitHub区分文件名大小写。

内容的提问来源于stack exchange，提问作者clingonboy