react-chat-engine使用POST请求创建用户返回403错误如何解决？

你的代码存在axios传参格式错误，这是触发403鉴权失败的核心原因：
axios.post方法的参数顺序为axios.post(请求地址, 请求体数据, 配置项)，你当前把请求头和请求体都放在了第二个参数里，导致Private-Key没有被正确附加到请求头，后端无法完成鉴权，所以返回403错误。

修正后的代码 #

const SignupForm = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [firstname, setFirst] = useState('');
    const [lastname, setLast] = useState('');
    const [error, setError] = useState('');
    // 提交事件处理函数
    const handleSubmit = async (e) => {
        e.preventDefault();
        // 鉴权请求头
        const authObject = {'Private-Key': '4922e43b-xxxxx-xxxx'}
        // 发起创建用户的POST请求
        try {
            await axios.post('https://api.chatengine.io/users/',
            // 第二个参数直接放请求体
            {
                username: username,
                secret: password,
                first_name: firstname,
                last_name: lastname
            },
            // 第三个参数放配置项（包含headers）
            {
                headers: authObject
            });
            // 登录用户
            localStorage.setItem('username', username)
            localStorage.setItem('password', password)
            window.location.reload()
         } catch (error) {
             console.log(error)
             setError('凭证错误，请重试')
         }
    }
    // 此处省略表单渲染逻辑
}

额外检查项 #

• 确认你使用的是Chat Engine项目后台「Settings」页下的Private Key，不要和Project ID、REST API Key混淆
• 如果你在后台开启了IP白名单，确认当前发起请求的客户端IP在白名单范围内
• 避免重复提交相同用户名的注册请求，已存在的用户名再次创建也会触发权限报错

内容的提问来源于stack exchange，提问作者damian-sketch