Laravel跨域策略导致Flutter Web无法显示网络图片求助

问题根源 #

前端域名https://admin.stop-ea.com请求https://haya.stop-ea.com下的图片时，目标服务器未返回Access-Control-Allow-Origin响应头，导致浏览器拦截跨域请求。

具体解决步骤 #

1. 配置Laravel CORS中间件（图片走Laravel路由时） #

如果图片是通过Laravel路由返回的（比如用Storage::url()生成的链接经过Laravel处理）：

• 确认项目已集成fruitcake/laravel-cors（Laravel 7+默认自带）
• 编辑config/cors.php：
  • 在paths数组中添加'storage/*'，覆盖图片存储路径
  • 将allowed_origins设为['https://admin.stop-ea.com']（生产环境别用*，避免安全风险）
  • 确保allowed_methods包含'GET'，allowed_headers包含'Content-Type'
• 在app/Http/Kernel.php中，给对应路由组（比如api或静态资源路由）启用cors中间件

2. 直接配置Web服务器添加CORS头（静态文件直接访问时） #

如果图片是Web服务器直接托管的静态文件（未经过Laravel路由），需要在haya.stop-ea.com的服务器配置中加规则：

Nginx配置示例

在对应server块中添加：

location /storage {
    add_header Access-Control-Allow-Origin "https://admin.stop-ea.com";
    add_header Access-Control-Allow-Methods "GET, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type";
    if ($request_method = OPTIONS) {
        return 204;
    }
}

修改后重启Nginx生效。

Apache配置示例

在.htaccess或虚拟主机配置中添加：

<Directory "/path/to/your/storage/directory">
    Header set Access-Control-Allow-Origin "https://admin.stop-ea.com"
    Header set Access-Control-Allow-Methods "GET, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type"
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=204,L]
</Directory>

修改后重启Apache生效。

3. 检查CDN/云存储的CORS规则（使用CDN时） #

如果图片托管在CDN或云存储服务上，直接在对应控制台配置CORS规则：

• 允许来源：https://admin.stop-ea.com
• 允许方法：GET
• 允许头：Content-Type

4. Flutter Web临时兼容（不推荐长期使用） #

仅作临时测试用，在Flutter Web的index.html中添加：

<meta http-equiv="Access-Control-Allow-Origin" content="https://admin.stop-ea.com">

优先解决服务器端配置，此方法仅部分场景有效。

内容的提问来源于stack exchange，提问作者Haya Hesham Abdel-azim