React个人网站HTTPS下MixedContent错误定位求助

我有一个部署在GitHub Pages、通过Google Domains绑定linsuhan.com的React作品集网站。http://linsuhan.com访问正常，但https://linsuhan.com访问时出现三个MixedContent错误：

Mixed Content: The page at 'https://linsuhan.com/' was loaded over HTTPS, but requested an insecure script 'http://linsuhan.com/static/js/main.a0793265.js'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://linsuhan.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://linsuhan.com/static/css/main.f8417732.css'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://linsuhan.com/' was loaded over HTTPS, but requested an insecure favicon 'http://linsuhan.com/logo-l.png'. This request has been blocked; the content must be served over HTTPS.

由于使用ReactJS，最终构建的.js、.css文件与源码中的.jsx、.scss文件差异极大，已耗时一周仍无法定位错误在源码中的具体位置，请问有没有办法找到该错误对应的源码行？

定位并修复问题的实用步骤 #

1. 先查核心配置文件 #

• 检查package.json的homepage字段：把硬编码的http://linsuhan.com改成相对路径./，或者带HTTPS的完整地址https://linsuhan.com，这是React构建时资源路径的核心控制项。
• 检查public/index.html：直接查找http://字符串，比如favicon的引用<link rel="icon" href="http://linsuhan.com/logo-l.png">，改成相对路径./logo-l.png或者协议相对URL//linsuhan.com/logo-l.png。

2. 用Source Map映射到源码 #

React构建默认生成Source Map文件（和构建后的js/css同名，后缀为.map），通过浏览器开发者工具定位：

• 打开Chrome/Firefox的DevTools，切换到Sources面板，左侧会出现webpack://或src目录，里面是你的原始源码。
• 点击Console错误信息里的脚本/样式链接（比如main.a0793265.js），DevTools会自动通过Source Map跳转到对应的源码行。

3. 全局搜索源码中的硬编码HTTP引用 #

在项目源码目录下，用编辑器的全局搜索功能（比如VS Code的Ctrl+Shift+F）查找http://linsuhan.com：

• 检查组件中资源引用：比如<img src="http://xxx">要改成process.env.PUBLIC_URL + '/xxx'或相对路径。
• 检查SCSS/样式文件：比如background: url(http://xxx)改成相对路径。

4. 强制GitHub Pages使用HTTPS #

进入GitHub仓库的Settings -> Pages，勾选Enforce HTTPS选项，GitHub会自动处理HTTP跳转HTTPS，并确保所有静态资源通过HTTPS加载。

5. 直接检查构建后的文件 #

运行npm run build后，打开build/index.html，搜索所有http://字符串，直接定位到硬编码的资源引用，再回溯到源码对应位置修改。

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