Flutter Web加载WordPress站点图片遭CORS拦截，寻求解决方法

问题描述 #

• Flutter应用在Android、iOS端运行正常，发布到Web端（域名：webapp.ockenheim.de）后，从https://app.ockenheim.de发起的GET请求被CORS拦截。
• 已在WordPress模板的function.php中添加过header( "Access-Control-Allow-Origin: https://webapp.ockennheim.de" );，也尝试过header( "Access-Control-Allow-Origin: *" );，目前自定义REST API端点的CORS请求已正常，但Network Image加载图片时仍被拦截。
• 报错信息：

Cross-Origin request blocked: The same origin rule block reading https://app.ockenheim.de/wp-content/uploads/2022/12/Screenshot_20221202_121659-1.jpg. (reason: CORS-header 'Access-Control-Allow-Origin' is missing). Statuscode: 200.

• 加载图片的Flutter代码：

Container(
              constraints: const BoxConstraints(
                maxHeight: double.infinity,
                maxWidth: double.infinity,
              ),
              width: 10000,
              //height: double.infinity,
              margin: const EdgeInsets.fromLTRB(0, 0, 0, 0),
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
              //height: 170,
              decoration: BoxDecoration(
                  image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(cardModell.bild),
              )),

解决方法 #

1. 给Web服务器配置媒体文件的CORS头 #

你在function.php里加的header只对WordPress的主题页面、自定义REST接口生效，但/wp-content/uploads下的媒体文件是由Web服务器（Apache/Nginx）直接处理的，不会走PHP流程，所以之前的设置对图片请求无效，需要在Web服务器层面配置：

Apache服务器

在app.ockenheim.de的根目录创建或修改.htaccess文件，添加以下规则：

<FilesMatch "\.(jpg|jpeg|png|gif|webp)$">
    Header set Access-Control-Allow-Origin "https://webapp.ockenheim.de"
</FilesMatch>

Nginx服务器

在对应站点的Nginx配置文件中添加：

location ~* \.(jpg|jpeg|png|gif|webp)$ {
    add_header Access-Control-Allow-Origin "https://webapp.ockenheim.de";
}

修改完成后重启Web服务器生效。

2. 验证配置是否生效 #

打开浏览器开发者工具的Network面板，重新加载页面，查看图片请求的响应头，确认Access-Control-Allow-Origin字段是否存在且值为https://webapp.ockenheim.de。

3. 备选：用代理转发图片请求 #

如果无法修改Web服务器配置，可以在Web端部署一个简单的代理脚本，让Flutter通过代理请求图片：

1. 在webapp.ockenheim.de的根目录创建proxy.php文件，内容如下：

<?php
if (!isset($_GET['url'])) {
    exit('缺少图片URL参数');
}
$imageUrl = urldecode($_GET['url']);
// 验证URL是否来自允许的域名，避免滥用
if (strpos($imageUrl, 'https://app.ockenheim.de/wp-content/uploads/') !== 0) {
    exit('不允许的图片来源');
}
$ch = curl_init($imageUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
// 获取图片的Content-Type
curl_setopt($ch, CURLOPT_HEADER, true);
$response = curl_exec($ch);
$headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
$headers = substr($response, 0, $headerSize);
$imageData = substr($response, $headerSize);
preg_match('/Content-Type: (.*?)\r\n/', $headers, $matches);
$contentType = $matches[1] ?? 'image/jpeg';
curl_close($ch);

header('Content-Type: ' . $contentType);
echo $imageData;
?>

2. 修改Flutter代码中的NetworkImage地址：

NetworkImage('https://webapp.ockenheim.de/proxy.php?url=${Uri.encodeComponent(cardModell.bild)}')

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