Flutter Web部署后与Appwrite的CORS跨域问题求助

问题描述 #

将Flutter Web应用部署到服务器（域名：www.example.com）后，页面可正常打开，但调用Appwrite服务时触发CORS错误。本地在Android Studio通过Chrome运行（localhost:端口）时一切正常。

已完成的操作：

• 将应用发布到Web服务器，可通过www.example.com访问；
• 在Appwrite控制台为应用配置自定义域名ar.example.com；
• 在域名DNS设置中添加A记录，Appwrite控制台可通过https://ar.example.com/访问；
• 按照文档在Appwrite服务器配置SSL证书；
• 修改Flutter应用中Appwrite的Endpoint为https://ar.example.com/v1；
• 修改Appwrite服务器appwrite文件夹下的.env文件，添加example.com和www.example.com。

浏览器控制台报错：

Access to XMLHttpRequest at 'https://ar.example.com/v1/account?#' from origin 'https://example.com/' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://localhost/' that is not equal to the supplied origin.

解决步骤 #

从错误信息来看，Appwrite返回的CORS允许源仍是https://localhost/，说明配置未生效，按以下步骤排查修复：

1. 检查Appwrite应用控制台的CORS配置

   • 登录https://ar.example.com控制台，找到对应Flutter Web应用的设置页面
   • 在「CORS Origins」字段中添加https://example.com和https://www.example.com，点击保存

2. 确认.env文件配置正确

   • 打开Appwrite服务器目录下的.env文件，定位到_APP_CORS_ORIGINS配置项
   • 确保值包含https://example.com,https://www.example.com（多个域名用英文逗号分隔，不要加空格）
   • 同时确认_APP_DOMAIN已设置为ar.example.com，保证自定义域名配置生效

3. 重启Appwrite服务

   • 在Appwrite服务器终端执行命令：

     docker compose up -d --force-recreate
     

   该命令会重新加载配置并重启所有Appwrite容器

4. 清除浏览器缓存

   • 部署后浏览器可能缓存了旧的CORS响应头，按Ctrl+Shift+R强制刷新页面，或手动清除该站点的缓存文件

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