一、跨域问题（CORS，Cross-Origin Resource Sharing）

跨域是指浏览器出于安全考虑，限制从一个源（origin）加载的文档或脚本与来自另一个源的资源进行交互的行为。简单来说，当一个网页尝试从与当前页面不同的域名、协议或端口加载资源或与之交互时，就会触发跨域问题。

同源策略（Same-Origin Policy）：浏览器的安全机制，用于防止恶意网站读取或修改其他网站的数据。

二、混合内容（Mixed Content）

浏览器为了保证安全性，在HTTPS网页内会阻止再发起的 HTTP 请求。

• 谷歌浏览器中抓包显示 This request has been blocked; the content must be served over HTTPS.

Firefox 浏览器抓包显示：已阻止加载混合活动内容

禁用浏览器的混合内容限制

• Firefox 浏览器：
  1. 在地址栏输入 about:config。
  2. 搜索 security.mixed_content.block_active_content。
  3. 将其设置为 false。

• Chrome 浏览器

  1. 在地址栏输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure。

  2. 将 Insecure origins treated as secure 设置为 Enabled。

  3. 在输入框中填写 http://blogimg。

  4. 重启浏览器。

注意：这种方法仅适用于本地测试。

nginx 添加代理

可以通过你的主域名 (land.snimay.net) 主机代理请求图片资源，再发送回给客户端，而不是直接通过客户去请求资源。

• 修改 land.snimay.net 的 Nginx 配置，添加一个代理路径

server {
    listen 443 ssl;
    server_name land.snimay.net;

    ssl_certificate /path/to/your/fullchain.pem;
    ssl_certificate_key /path/to/your/privkey.pem;

    # 代理图片请求
    location /images {
        # 使用 rewrite 指令移除 /images/ 前缀，才能访问真实的路径
        rewrite ^/images/(.*)$ /$1 break;
        # 将请求代理到目标图片服务器
        proxy_pass http://blogimg;
        proxy_set_header Host blogimg;  # 设置请求头中的 Host 字段为 blogimg
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 将客户端的真实 IP 地址添加到 X-Forwarded-For 头字段中，后端服务器能够获取客户端的真实 IP 地址
        proxy_set_header X-Forwarded-Proto $scheme;  # $scheme 表示客户端请求的协议（HTTP/HTTPS）添加到 X-Forwarded-Proto 头字段中
        }
}

• 修改页面中的图片链接

<img src="https://land.snimay.net/images/i/2025/02/19/iv15zb-0.webp" alt="Image">

HTTP 图片资源升级为 HTTPS

最推荐的解决方案，将 http://blogimg 的资源服务器升级为 HTTPS，确保图片资源也通过 HTTPS 提供。