[前端开发]GitHub Pages网站无法通过Supabase接口提交/加载数据

Question

【前端开发】GitHub Pages网站无法通过Supabase接口提交/加载数据

问题正文：

开发环境：
部署平台：GitHub Pages 和netlify
数据库：Supabase PostgreSQL

问题描述：
我的个人网站（GitHub Pages部署）与Supabase数据库接口对接异常，具体表现为：

1. 各种表单提交后无数据入库
   如：
2. 首页留言板：https://lxqlixiaoqi.netlify.app/
3. 日记界面：https://lxqlixiaoqi.netlify.app/diary
4. 心情墙界面：https://lxqlixiaoqi.netlify.app/mood-wall
   总之就是各种和上传数据到supabase的都无效

2. 历史数据加载功能失效

完整项目可见GitHub仓库： [

GitHub - lxqlixiaoqi/lxqlixiaoqi.github.io: from wangyuzhen to lixiaoqi from wangyuzhen to lixiaoqi. Contribute to lxqlixiaoqi/lxqlixiaoqi.github.io development by creating an account on GitHub. https://github.com/lxqlixiaoqi/lxqlixiaoqi.github.io

]

出问题的网站：[

琪的网站 https://lxqlixiaoqi.netlify.app/

]
supabase网站项目地址：[

Supabase Supabase Studio https://supabase.com/dashboard/project/xlifqkkeewtsejxrrabg

]

已尝试的解决方案：

1. 在Supabase控制台配置CORS白名单（包含GitHub Pages域名和localhost）
2. 客户端初始化代码添加CORS头信息：

   const supabase = supabase.createClient(supabaseUrl, supabaseKey, {
   global: {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, DELETE, PUT'
    }
   }
   });
   

3. 确保数据库表结构与代码匹配（diaries表包含content/weather/mood字段）

关键代码片段：

// 数据提交逻辑
const { data, error } = await supabase
  .from('diaries')
  .insert([{
    content: cleanHtmlContent,
    weather,
    mood,
    created_at: new Date().toISOString()
  }]);

// 数据加载逻辑 
const { data, error } = await supabase
  .from('diaries')
  .select('*')
  .order('created_at', { ascending: false });

Answer 1

让 “紫雾凌寒” 来帮你回答,本回答结合 DeepSeek

如果还有问题，请评论或点击头像私信，如果有帮助到您, 请关注、采纳、点赞

1. 关键点分析：
   - 核心问题是在GitHub Pages环境下，前端与Supabase接口交互数据时出现问题，无法进行提交或加载操作。
   - 涉及到GitHub Pages的部署机制、Netlify的配置（虽然未详细说明Netlify相关，但它可能是GitHub Pages的部署中介）以及Supabase的PostgreSQL数据库和接口交互。
2. 解决方案：
   - 跨域问题：
   • GitHub Pages是静态页面服务，它和Supabase的接口可能存在跨域限制。可以在Supabase中配置CORS（跨域资源共享）。
   • 例如，在Supabase控制台中，进入项目设置，找到“API”选项卡，在“CORS”部分添加允许GitHub Pages的源。假设GitHub Pages的网站地址是https://your-username.github.io/your-repo/，则在CORS允许的源中添加https://your-username.github.io。
   • 前端代码问题：
   • 检查前端代码中与Supabase接口交互的部分。例如，使用fetch API时，确保请求的URL正确指向Supabase接口。
   • 示例代码：
     javascript fetch('https://your-supabase-project-url.functions.supabase.co/your-api-endpoint', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ data: 'your-data' }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
   • 确保传递给接口的请求头和数据格式正确。如果需要身份验证，要正确设置认证信息，比如使用Supabase的JWT（JSON Web Token）。
   • 网络权限问题：
   • 确认GitHub Pages网站所在的网络环境没有阻止与Supabase接口的通信。有时候网络防火墙等可能会限制访问。
3. 多种解决方案的优缺点：
   - 配置Supabase CORS：
   • 优点：从服务器端层面解决跨域问题，一劳永逸，对所有访问Supabase接口的前端请求都生效。
   • 缺点：如果配置错误，可能会导致安全风险，比如允许了不必要的源访问。
   • 前端代码调整：
   • 优点：针对性强，可以快速定位和解决当前前端代码中的问题，比如请求URL错误、数据格式错误等。
   • 缺点：如果问题出在其他地方，如网络或服务器配置，可能无法解决根本问题。
   • 检查网络权限：
   • 优点：简单直接，如果是网络限制导致的问题，可以快速发现并解决。
   • 缺点：比较依赖网络环境，对于复杂的网络设置排查相对困难。
4. 总结：
   首先要排查是否存在跨域问题，通过Supabase的CORS配置来解决。然后仔细检查前端代码中与Supabase接口交互的逻辑，包括请求URL、数据格式、认证信息等。最后确认网络环境没有对通信造成限制。通过综合排查这些方面，逐步找到并解决GitHub Pages网站无法与Supabase接口正常提交/加载数据的问题。

希望以上解答对您有所帮助。如果您有任何疑问，欢迎在评论区提出。