403-ERR_BAD_REQUEST:使用状态代码403当我使用get和post for React-Chat-engine API时请求失败
请告诉我我做错了什么,为什么我有403 Axioserror? 我使用的是React V17和Axios V0.27.2和React-Chat-engine v1.11.23。如何解决此问题?
这是我的Imports
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 URL,打开页面并编写HTTP 403时, 。 通常,我没有访问API和聊天引擎。
感谢您的帮助。
please tell me what I did wrong and why I have 403 axiosError?
I am using React v17 and axios v0.27.2 and react-chat-engine v1.11.23 . how can I fix this problem?
here is my imports
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";
and this is main code
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;
Also when I click on api Urls, opens a page and write HTTP 403 Forbidden.
Generally i do not have access the api and chat engine.
Thanks for your help.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
要与API服务器建立连接,您需要一个私钥,该密钥放置在项目仪表板中的
api键
部分。然后将其用作Axios
标题。您可以从官方帖子示例To make a connection to the api server you need a private key that is placed at your
API Keys
section in your project dashboard. Then use it asaxios
header. You can see the example from the official POST example here我在相同的代码方面遇到了同样的问题。我通过更改VPN服务来修复它。请检查您的私钥并使用其他VPN服务进行测试。
I had the same issue with the same code. I fixed it by changing the VPN service. Please check your private key and test with other VPN services.