震惊！鱼皮限制了我的学习之路，我却是这样做的。。。

哈哈哈，抖个机灵。模仿今日头条震惊体 /斜眼笑 /斜眼笑

一、背景

加入星球两年半了，不过自从转到网站上来了之后，就很少看了。 这几天开始看【AI智能体项目】，看着看着就迷糊了，一张图都没有。 之前以为只有帖子没有图，结果教程的图也不能加载。这

不过作为老粉，知道以鱼皮的网站被刷流量，后来网站基本都限制了外国 IP 访问。也不强求了。

买回国的代理，价格特别贵，有点舍不得，而且挂上了，外国的网站可能又看不了了。于是在思考一个简单的方案。

如图，图片加载不出来

二、需求分析

• 目标：正常访问受限图片资源。
• 限制：目标图片服务器仅允许中国大陆 IP 访问，海外直接请求会被拒绝或限频。
• 场景：适用于任何前端页面图片被地域限制、跨域的场景。

三、解决方案

1. 部署大陆服务器图片代理服务

• 在中国大陆服务器部署图片代理接口，负责中转下载目标图片。
• 代理服务对外暴露统一接口，前端通过该接口获取图片数据。
• 代理服务示例接口：

  ▼
  text
  复制代码
  GET https://服务器地址/api/file/image/proxy?url={图片URL}
  

2. 前端自动替换图片链接

• 使用 Tampermonkey（油猴）脚本自动将网页中的图片链接替换为代理接口地址。
• 支持 <img src="..."> 和 style="background-image:url(...)" 两种图片加载方式。
• 脚本核心逻辑：
  • 检测所有图片和带有 style 的元素
  • 将原始图片 URL 替换为代理接口 URL
  • 监听 DOM 变化，动态处理懒加载图片

脚本片段示例：

▼
js
复制代码
(function () {
    'use strict';
    const proxyPrefix = 'https://服务器地址/api/file/image/proxy?url=';

    // 替换 <img src="..."> 的链接
    function replaceImageSrc() {
        const imgs = document.querySelectorAll('img');
        log(`正在检查 ${imgs.length} 张图片`);

        imgs.forEach(img => {
            const src = img.getAttribute('src');
            if (src && src.includes('https://pic.code-nav.cn/')) {
                const proxyUrl = proxyPrefix + encodeURIComponent(src);
                log(`替换图片链接: ${src} => ${proxyUrl}`);
                img.setAttribute('src', proxyUrl);
            }
        });
    }

    // 替换 style 属性中的 background-image:url(...) 链接
    function replaceStyleBackgrounds() {
        const styledElements = document.querySelectorAll('[style]');
        log(`正在检查 ${styledElements.length} 个带样式的元素`);

        styledElements.forEach(el => {
            const style = el.getAttribute('style');
            const urlMatch = style.match(/https:\/\/pic\.code-nav\.cn\/[^\s"')]+/g);
            if (urlMatch) {
                let newStyle = style;
                urlMatch.forEach(url => {
                    const proxyUrl = proxyPrefix + encodeURIComponent(url);
                    log(`替换样式背景图片: ${url} => ${proxyUrl}`);
                    newStyle = newStyle.replace(url, proxyUrl);
                });
                el.setAttribute('style', newStyle);
            }
        });
    }

    function replaceAll() {
       
        replaceImageSrc();
        replaceStyleBackgrounds();
       
    }

    // 初次执行
    replaceAll();

    // 处理后续动态加载（如懒加载图片）
    const observer = new MutationObserver((mutations) => {
  
        replaceAll();
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['src', 'style']
    });

})();

3. 后端实现（Java Spring Boot）

• 实现逻辑：
  • 接收前端传入的图片 URL
  • 后端服务器发起 HTTP 请求下载图片
  • 返回图片二进制数据给前端，支持跨域
• 关键代码片段：

▼
java
复制代码
@GetMapping("/image/proxy")
public ResponseEntity<byte[]> downloadImage(@RequestParam("url") String imageUrl) {
    return fileService.downloadImage(imageUrl);
}


public ResponseEntity<byte[]> downloadImage(String imageUrl) {
        if (!StringUtils.hasText(imageUrl)) {
            log.error("图片URL为空");
            return ResponseEntity.badRequest().build();
        }

        try {
            // 创建URL连接
            URL url = new URL(imageUrl);
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            
            // 设置请求方法和超时时间
            connection.setRequestMethod("GET");
            connection.setConnectTimeout(10000); 
            connection.setReadTimeout(30000);
            
            // 设置User-Agent避免某些网站拒绝请求
            connection.setRequestProperty("User-Agent", 
                "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36");
            
            // 检查响应码
            int responseCode = connection.getResponseCode();
            if (responseCode != HttpURLConnection.HTTP_OK) {
                log.error("下载图片失败，响应码: {}, URL: {}", responseCode, imageUrl);
                return ResponseEntity.status(HttpStatus.NOT_FOUND).build();
            }
            
            // 获取内容类型
            String contentType = connection.getContentType();
            if (contentType == null || !contentType.startsWith("image/")) {
                log.error("URL不是有效的图片资源: {}", imageUrl);
                return ResponseEntity.badRequest().build();
            }
            
            // 读取图片数据
            byte[] imageData = readInputStreamToByteArray(connection.getInputStream());
            
            // 设置响应头
            HttpHeaders headers = new HttpHeaders();
            headers.setContentType(MediaType.parseMediaType(contentType));
            headers.setContentLength(imageData.length);

            return ResponseEntity.ok().headers(headers).body(imageData);
            
        } catch (IOException e) {
        }
    }

四、效果