ReactJS调用Supabase GET接口返回401错误求助

在React项目中使用useEffect钩子调用Supabase后端GET接口获取数据时，控制台持续出现401错误，即使禁用了行级安全（RLS）也无法解决。已打印Supabase对象确认其能正常显示API和URL信息，但问题依旧。

组件代码 #

import { useEffect, useState } from "react"
import supabase from "./../config/supabaseConfig"

export default function Home() {
    const [err, setErr] = useState(null)
    const [table, setTable] = useState(null)

    useEffect(() => {
        const fetchData = async () => {
            const {data, error} = await supabase
                .from('supabases')
                .select()

                if (error) {
                    setErr('could not fetch the table')
                    setTable(null)
                }

                if (data) {
                    console.log(data)
                    setTable(data)
                    setErr(null)
                }
        }

        fetchData()
    }, [])

    return (
        <div className="home-page">
            {err && (<div> {err} </div>)}
            {table && (
                <div className="table">
                    {
                        table.map(e => (
                            <p>{e.title}</p>
                        ))
                    }
                </div>
            )}
        </div>
    )
}

Supabase配置文件 #

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_REACT_APP_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_REACT_APP_SUPABASE_ANON_KEY
const supabase = createClient(supabaseUrl, supabaseKey)

export default supabase

排查与解决方案 #

• 检查匿名密钥权限：进入Supabase控制台「设置」→「API」→「项目API密钥」，确认匿名密钥（anon key）的权限包含select操作。即使RLS禁用，密钥本身需要具备对应的数据访问权限，若权限被修改需重置为默认公共权限。
• 验证环境变量准确性：在组件中直接打印import.meta.env.VITE_REACT_APP_SUPABASE_URL和import.meta.env.VITE_REACT_APP_SUPABASE_ANON_KEY，确认与Supabase控制台中的值完全一致，无拼写错误或多余空格。
• 确认表名正确性：检查Supabase中的表名是否为supabases，注意大小写区分。若表名包含大写字母，需用双引号包裹，例如.from('"Supabases"')。
• 直接测试API请求：用curl或Postman发起请求验证权限：

  curl "https://你的SupabaseURL.supabase.co/rest/v1/supabases?select=*" \
  -H "apikey: 你的匿名密钥" \
  -H "Authorization: Bearer 你的匿名密钥"
  

  若请求仍返回401，说明问题出在Supabase配置而非React代码。
• 检查项目状态：确认Supabase项目未被暂停，处于正常运行状态。
• 清除浏览器缓存：旧的认证缓存可能导致401，尝试清除缓存或使用无痕模式测试。

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