如何为Flutter Web仅指定文件夹禁用CORS限制

Flutter Web编译后是静态资源，本身不会直接处理CORS规则——你遇到的限制实际是由Web服务器（Apache/Nginx等）的配置导致的。要仅对/public_html/images文件夹开放跨域访问，可针对服务器类型添加以下配置：

Apache服务器配置 #

在public_html目录下的.htaccess文件中添加规则（如果没有.htaccess文件，直接新建一个）：

<Directory "/public_html/images">
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type"
</Directory>

• 若需限制特定域名跨域，将*替换为目标域名（如https://your-target-domain.com）
• 该规则仅对images目录生效，不会影响其他文件的跨域限制

Nginx服务器配置 #

找到站点配置文件（通常位于/etc/nginx/sites-available/目录下），在server块内添加以下location规则：

location /images/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods GET, OPTIONS;
    add_header Access-Control-Allow-Headers Content-Type;
}

配置完成后重启Nginx服务：

sudo systemctl restart nginx

验证方式 #

1. 使用浏览器开发者工具的「网络」面板，查看图片请求的响应头，确认是否包含Access-Control-Allow-Origin字段
2. 直接通过其他服务器的页面尝试加载目标图片，检查是否仍存在CORS报错

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