使用Appwrite Functions（JS客户端）时遭遇CORS错误

问题分析 #

你当前使用前端fetch请求Appwrite Functions时触发CORS错误，核心原因是Appwrite Functions未配置允许你的前端域名发起跨域请求。

解决步骤 #

1. 打开Appwrite控制台，定位目标Function
   进入对应项目，左侧菜单选择「Functions」，找到你要配置的函数。

2. 配置CORS允许规则

   • 进入函数的「Settings」页面
   • 找到「CORS」板块，在「Allowed Origins」中添加你的前端应用域名（即截图中显示的主机名）
   • 开发阶段可临时填*允许所有来源，生产环境务必指定具体域名，避免安全风险

3. 确认请求头配置
   你的客户端代码中Content-Type: application/json属于Appwrite默认允许的请求头，若后续使用自定义请求头，需在「Allowed Headers」中补充对应字段。

4. 重新部署Function
   修改配置后，必须重新部署函数，确保CORS规则生效。

你的客户端代码 #

<script>
  const url = "https://sample.appwrite.global/";
  const headers = {
    "Content-Type": "application/json"
  };

  const data = {
    "key": "",
    "uid": ""
  };

  fetch(url, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(data)
  })
    .then(response => response.text())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

</script>

截图信息说明 #

• 错误截图提示：浏览器检测到跨域请求的Origin未被目标资源允许，触发CORS拦截
• 主机名截图：显示你的前端应用域名，需将此域名添加到Appwrite Function的Allowed Origins中

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