403-ERR_BAD_REQUEST：当我对 React-Chat-Engine api 使用 get 和 post 时，请求失败，状态码为 403答案

【问题标题】：403-ERR_BAD_REQUEST: Request faild with status code 403 when I using get and post for React-Chat-Engine api403-ERR_BAD_REQUEST：当我对 React-Chat-Engine api 使用 get 和 post 时，请求失败，状态码为 403
【发布时间】：2022-10-19 21:27:13
【问题描述】：

请告诉我我做错了什么以及为什么我有 403 axiosError？我正在使用 React v17 和 axios v0.27.2 和 react-chat-engine v1.11.23 。我该如何解决这个问题？

这是我的进口

import React, { useState, useEffect, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { ChatEngine } from "react-chat-engine";
import axios from "axios";

// Contexts
import { AuthContext } from "../contexts/AuthContextProvider";

这是主要代码

const Chats = () => {
    const [loading, setLoading] = useState(true);
    const user = useContext(AuthContext);
    const navigate = useNavigate();

    useEffect(() => {
        if (!user) {
            navigate("/");
            return;
        }
        axios
            .get("https://api.chatengine.io/users/me/", {
                headers: {
                    "Project-ID": "6e1e7008-716b-4141-a15c-836f05f720dd",
                    "User-Name": user.email,
                    "User-Secret": user.uid,
                },
            })
            .then(() => {
                setLoading(false);
            })
            .catch(() => {
                let formdata = new FormData();
                formdata.append("email", user.email);
                formdata.append("username", user.email);
                formdata.append("secret", user.uid);
                getFile(user.photoURL).then((avatar) => {
                    formdata.append("avatar", avatar, avatar.name);
                    axios
                        .post("https://api.chatengine.io/users/", formdata, {
                            headers: {
                                "private-key":
                                    "8094d378-e224-4558-97bf-35ca877f8f8e",
                            },
                        })
                        .then(() => setLoading(false))
                        .catch((error) => console.log(error));
                });
            });
    }, [user, navigate]);

    const getFile = async (url) => {
        const response = await fetch(url);
        const data = await response.blob();
        return new File([data], "userPhoto.jpg", { type: "image/jpeg" });
    };

    if (!user || loading) return "Loading...";

    return (
        <div>
            <ChatEngine
                height="calc(100vh - 50px)"
                projectID="6e1e7008-716b-4141-a15c-836f05f720dd"
                userName={user.email}
                userSecret={user.uid}
            />
        </div>
    );
};

export default Chats;

此外，当我单击 api Urls 时，会打开一个页面并写入 HTTP 403 Forbidden。通常我无法访问 api 和聊天引擎。

谢谢你的帮助。

【问题讨论】：

标签： reactjs api axios http-status-code-403 react-chat-engine

【解决方案1】：

要连接到 api 服务器，您需要一个私钥，该私钥位于项目仪表板的 API Keys 部分。然后将其用作axios 标头。可以从官方POST示例here看到示例

headers: {
   'PRIVATE-KEY': '{{private_key}}'
},

【讨论】：

【解决方案2】：

我对相同的代码有同样的问题。我通过更改 VPN 服务来修复它。请检查您的私钥并使用其他 VPN 服务进行测试。

【讨论】：