Next.js API从Laravel拉取数据时图片返回500(ECONNREFUSED)错误求助

核心问题 #

ECONNREFUSED 错误表明前端尝试请求图片的目标地址无法建立连接，其他字段能正常获取说明接口数据传输没问题，问题出在图片URL的配置/访问路径上。

常见原因 #

1. Laravel返回的图片路径是相对路径或仅本地可访问的localhost地址，前端（浏览器/Next.js服务）无法访问到Laravel的静态资源服务；
2. Laravel的静态资源未正确配置（未创建storage软链接）；
3. 跨域配置不规范，导致图片请求被拦截（不过ECONNREFUSED更偏向连接失败，而非CORS拦截）。

解决方案 #

1. 让Laravel返回可公网访问的完整图片URL #

修改Laravel项目的.env文件，设置正确的APP_URL（对应你的Laravel服务地址，本地开发一般是http://localhost:8000，部署环境填域名）：

APP_URL=http://localhost:8000

在Courses模型中添加访问器，自动生成完整图片URL：

// app/Models/Courses.php
class Courses extends Model
{
    // ... 其他代码

    public function getImageUrlAttribute()
    {
        // asset() 会基于APP_URL生成完整的资源URL
        return $this->image ? asset($this->image) : null;
    }
}

然后在API路由中返回带完整URL的字段：

Route::get('/courses', function () {
    // append('image_url') 把自定义字段加入返回结果
    $courses = Courses::all()->append('image_url');
    return response()->json(['courses' => $courses], 200);
});

2. 配置Next.js代理转发图片请求 #

如果不想修改Laravel的返回格式，可以在Next.js中配置代理，把图片请求转发到Laravel服务：

创建/修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        // 匹配前端请求的图片路径
        source: '/storage/:path*',
        // 转发到Laravel的静态资源地址
        destination: 'http://localhost:8000/storage/:path*',
      },
    ];
  },
};

module.exports = nextConfig;

之后前端直接用/storage/xxx.jpg这样的路径即可访问图片，Next.js会自动转发请求到Laravel。

3. 确保Laravel静态资源可访问 #

执行Laravel的storage软链接命令，确保storage/app/public目录的资源能通过public/storage访问：

php artisan storage:link

4. 规范CORS配置（可选） #

不要手动在Laravel路由里加Access-Control-Allow-Origin头，安装官方推荐的CORS包：

composer require barryvdh/laravel-cors

然后在config/cors.php中配置允许的域名、请求方法等，这样配置更可靠，避免跨域问题。

额外检查 #

• 确认Laravel服务处于运行状态（php artisan serve或Nginx已启动），端口与配置一致；
• 本地开发时，防火墙未拦截Laravel服务的端口；
• 前端请求中不需要添加Access-Control-Allow-Origin头，这是服务器返回的响应头，前端添加无效。

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