Next.js使用Remotive API加载Logo遇403错误求解决方案

直接绕过图片优化（最快解决） #

如果不需要Next.js的图片压缩、自适应等优化功能，直接给Image组件加unoptimized={true}即可——这样组件会直接渲染原生<img>标签，不走Next.js的代理服务，自然不会被Remotive服务器拒绝：

import Image from 'next/image';

function JobCard({ logoUrl }) {
  return (
    <Image
      src={logoUrl}
      alt="公司Logo"
      width={100}
      height={100}
      unoptimized={true} // 关键属性
    />
  );
}

export default JobCard;

保留图片优化的方案（自定义代理） #

要是想保留Next.js的图片优化特性，就得通过API路由做中间代理，给请求添加浏览器级别的请求头，让Remotive服务器识别为正常用户访问：

1. 先确保next.config.js里的remotePatterns配置正确：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'remotive.com',
        pathname: '/job/**/logo', // 匹配所有job路径下的logo
      },
    ],
  },
};

module.exports = nextConfig;

2. 创建app/api/proxy-image/route.js作为代理接口：

import { NextResponse } from 'next/server';

export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const imageUrl = searchParams.get('url');
  
  // 限制仅转发Remotive的logo请求，避免接口滥用
  if (!imageUrl || !imageUrl.startsWith('https://remotive.com/job/')) {
    return NextResponse.json({ error: '无效的图片链接' }, { status: 400 });
  }

  try {
    // 模拟浏览器请求头，绕过服务器的反爬拦截
    const response = await fetch(imageUrl, {
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36',
        'Referer': 'https://remotive.com/',
      },
    });

    if (!response.ok) {
      return NextResponse.json({ error: '获取图片失败' }, { status: response.status });
    }

    const blob = await response.blob();
    return new NextResponse(blob, {
      headers: {
        'Content-Type': response.headers.get('Content-Type') || 'image/png',
        'Cache-Control': 'public, max-age=31536000', // 缓存图片一年，减少重复请求
      },
    });
  } catch (error) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

3. 在Image组件中使用代理地址：

import Image from 'next/image';

function JobCard({ logoUrl }) {
  const proxyUrl = `/api/proxy-image?url=${encodeURIComponent(logoUrl)}`;
  return (
    <Image
      src={proxyUrl}
      alt="公司Logo"
      width={100}
      height={100}
    />
  );
}

export default JobCard;

先检查remotePatterns配置 #

有时候403是因为remotePatterns的通配符配置错误，比如pathname没写对。确保你的配置能匹配https://remotive.com/job/1912073/logo这类路径，比如用/job/*/logo（匹配单个路径段）或/job/**/logo（匹配多个路径段）。

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