Laravel/Lumen重定向Cloudinary资源触发CORS跨域错误

我之前也碰到过一模一样的问题，给你几个实用的解决思路：

1. 直接返回Cloudinary资源URL，让前端自主请求 #

这是最推荐的方案，既简单又不占用服务器资源。

问题根源在于：你的API重定向后，浏览器直接访问Cloudinary的资源，但Cloudinary的响应头里没有Access-Control-Allow-Origin允许你的前端域名，所以被浏览器拦截了。

改成在API里返回资源URL，让前端用这个URL去发起请求，同时去Cloudinary控制台配置CORS规则允许你的前端域名即可：

修改API代码： #

return response()->json([
    'url' => "https://res.cloudinary.com/gates/raw/upload/{$upload->id}"
]);

配置Cloudinary CORS： #

• 登录Cloudinary控制台，进入 Settings > Security > Cross-origin resource sharing (CORS)
• 添加一条规则：
  • Allowed origins：填入你的前端域名，比如 https://{my-frontend.com}（如果要允许所有可以填*，但生产环境不推荐）
  • Allowed methods：勾选GET（根据你的需求选）
  • 其他选项保持默认，保存配置

等配置生效后，前端直接请求这个Cloudinary URL就不会有CORS问题了。

2. 通过你的服务器代理Cloudinary资源 #

如果不想让前端直接访问Cloudinary，可以在你的Laravel/Lumen服务器里先获取资源，再返回给前端，这样响应头由你自己控制，就能加上CORS头：

示例代码： #

use Illuminate\Support\Facades\Http;
use Illuminate\Http\Request;

public function export(Request $request)
{
    $cloudinaryUrl = "https://res.cloudinary.com/gates/raw/upload/{$upload->id}";
    // 获取Cloudinary资源
    $cloudinaryResponse = Http::get($cloudinaryUrl);

    // 把资源返回给前端，同时添加CORS头
    return response($cloudinaryResponse->body(), $cloudinaryResponse->status())
        ->header('Access-Control-Allow-Origin', 'https://{my-frontend.com}')
        ->header('Content-Type', $cloudinaryResponse->header('Content-Type'));
}

⚠️ 注意：如果资源体积较大，这种代理方式会占用你的服务器带宽和内存，建议只在必要时使用，或者优化成流式响应来减少内存占用。

3. 配置Cloudinary CORS以支持重定向场景 #

如果你坚持要用重定向的方式，必须让Cloudinary返回包含你的前端域名的Access-Control-Allow-Origin头。配置步骤和上面第一种方案里的Cloudinary CORS配置一样，等配置生效后，浏览器重定向到Cloudinary资源时就能通过CORS校验了。

不过这种方式不如第一种灵活，因为重定向后浏览器的请求地址会变成Cloudinary的URL，可能会有其他限制（比如缓存、权限控制等）。

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