今天发现一个提升图片加载速度的方法就是使用服务器代理

最近在做我的网站的时候,发现调用nano banana接口时,返回的图片是一个国外地址,国内在客户端加载的时候会比较慢。于是研究了下如何提高速度,问了AI找到一个简单的方法,就是使用服务器代理。

php 复制代码
export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url);
    const imageUrl = searchParams.get('url');
    
    if (!imageUrl) {
      return NextResponse.json({ error: 'Missing image URL' }, { status: 400 });
    }

    // 验证URL是否安全
    if (!imageUrl.startsWith('http://') && !imageUrl.startsWith('https://')) {
      return NextResponse.json({ error: 'Invalid URL' }, { status: 400 });
    }

    // 下载图片
    const response = await fetch(imageUrl, {
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
        'Accept': 'image/*',
      },
      // 设置超时
      signal: AbortSignal.timeout(30000), // 30秒超时
    });
    
    if (!response.ok) {
      return NextResponse.json({ error: 'Failed to fetch image' }, { status: 500 });
    }

    const imageBuffer = await response.arrayBuffer();
    const contentType = response.headers.get('content-type') || 'image/jpeg';

    // 返回图片数据,设置缓存头
    return new NextResponse(imageBuffer, {
      headers: {
        'Content-Type': contentType,
        'Cache-Control': 'public, max-age=31536000, immutable', // 缓存1年
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Content-Length': imageBuffer.byteLength.toString(),
      },
    });

  } catch (error) {
    console.error('Proxy image error:', error);
    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
  }
}

然后在后端生成图片之后,调用服务器代理。

javascript 复制代码
if (generatedImageUrl && typeof generatedImageUrl === 'string' && generatedImageUrl.startsWith('http')) {
                try {
                  // 使用代理URL,这样图片会通过你的服务器加载,速度更快
                  const proxyUrl = `/api/proxy-image?url=${encodeURIComponent(generatedImageUrl)}`;
                  generatedImageUrl = proxyUrl;
                } catch (conversionError) {
                  console.error('Failed to create proxy URL:', conversionError);
                  // 如果转换失败,保持原URL
                }
              }

这样处理之后,加载图片快多了。不知道这样会不会对服务端性能有啥影响,有其他更好的办法吗,比如在服务端转化为base64位图片。

相关推荐
●VON13 分钟前
React Native for OpenHarmony:项目目录结构与跨平台构建流程详解
javascript·学习·react native·react.js·架构·跨平台·von
qq_1777673734 分钟前
React Native鸿蒙跨平台实现消息列表用于存储所有消息数据,筛选状态用于控制消息筛选结果
javascript·react native·react.js·ecmascript·harmonyos
摘星编程1 小时前
React Native + OpenHarmony:自定义useEllipsis省略号处理
javascript·react native·react.js
2601_949593652 小时前
基础入门 React Native 鸿蒙跨平台开发:Animated 动画按钮组件 鸿蒙实战
react native·react.js·harmonyos
●VON3 小时前
React Native for OpenHarmony:ScrollView 事件流、布局行为与性能优化深度剖析
学习·react native·react.js·性能优化·openharmony
2601_949593654 小时前
高级进阶 React Native 鸿蒙跨平台开发:LinearGradient 玻璃拟态卡片
react native·react.js·harmonyos
摘星编程4 小时前
在OpenHarmony上用React Native:TopTab顶部标签页
react native·react.js·harmonyos
Swift社区4 小时前
Nginx 反向代理配置 React 前端与 Python 后端
前端·nginx·react.js
摘星编程5 小时前
用React Native开发OpenHarmony应用:NativeStack原生导航
javascript·react native·react.js
●VON5 小时前
从像素到语义:React Native Text 组件在 OpenHarmony 上的渲染哲学与工程实现
android·react native·react.js