Github Pages无法加载HTTP图片，出现net::ERR_SSL_PROTOCOL_ERROR错误求助

核心原因 #

Github Pages 强制使用 HTTPS，而浏览器的混合内容安全策略会阻止 HTTPS 页面加载 HTTP 协议的资源，这就是你遇到 net::ERR_SSL_PROTOCOL_ERROR 的根本原因。

无需修改ArangoDB的替代方案 #

1. 利用PythonAnywhere做反向代理（适配你的订阅） #

完全可以通过PythonAnywhere绕过SSL限制，具体步骤：

• 在PythonAnywhere上创建新的WSGI应用（比如Flask），平台默认会给所有应用配置免费SSL证书，自动支持HTTPS访问。
• 在代理应用中编写转发路由，将HTTPS请求转接到你的ArangoDB服务器的HTTP图片地址：

  from flask import Flask, Response
  import requests
  
  app = Flask(__name__)
  ARANGO_IMAGE_ROOT = "http://21.23.24.25:8352/data/images/"
  
  @app.route('/images/<path:filename>')
  def proxy_image(filename):
      target_url = f"{ARANGO_IMAGE_ROOT}{filename}"
      # 转发请求并保留图片响应的头信息和内容
      resp = requests.get(target_url, stream=True)
      return Response(
          resp.raw,
          status=resp.status_code,
          headers=dict(resp.headers)
      )
  

• 部署完成后，你的React网站就可以通过PythonAnywhere的HTTPS地址加载图片，比如 https://你的PythonAnywhere用户名.pythonanywhere.com/images/image.jpg，完全符合浏览器安全策略。

2. 临时放宽浏览器混合内容限制（仅用于开发测试） #

如果只是个人测试使用，可以临时调整浏览器设置：

• 在Chrome地址栏输入 chrome://flags/#mixed-content-setting，将选项改为「允许」；针对本地测试可使用 chrome://flags/#allow-insecure-localhost。
• 注意：此方法仅适合开发调试，不能要求普通用户操作，会带来安全风险。

3. 同步图片到Github Pages静态资源目录 #

若图片更新频率低，可定期将ArangoDB存储的图片同步到React项目的public/images目录，之后直接通过Github Pages的HTTPS地址加载（比如 https://你的用户名.github.io/你的仓库名/images/image.jpg）。这种方式无需额外服务器，但图片更新需要手动或脚本自动同步。

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