[英]Unable to Fetch backend from frontend
我正在尝试通过分叉来建立一个回购。 我安装了所有 npm 包和所有必要的更改,以在前端和后端启动开发服务器。 但是当我点击 POST 路由时,它给我发送了一些奇怪的错误。
Frontend.env 文件
REACT_APP_BACKEND_URL="https://127.0.0.1:2222"
REACT_APP_CLOUDINARY_URL="https://api.cloudinary.com/v1_1/sagar-barapatre/upload"
index.js
export const client = (endpoint, { body, ...customConfig } = {}) => {
const token = localStorage.getItem("token");
const headers = { "Content-Type": "application/json" };
if (token) {
headers.Authorization = `Bearer ${token}`;
}
const config = {
method: body ? "POST" : "GET",
...customConfig,
headers: {
...headers,
...customConfig.headers,
},
};
if (body) {
config.body = JSON.stringify(body);
}
return fetch(`${process.env.REACT_APP_BACKEND_URL}${endpoint}`, config).then(
async (res) => {
const data = await res.json();
if (res.ok) {
return data;
} else {
return Promise.reject(data);
}
}
);
};
当我尝试注册时,它显示无法获取POST https://127.0.0.1:2222/auth/signup
net::ERR_SSL_PROTOCOL_ERROR
我正在尝试发布帖子请求,下面是 signup.js 的代码
import React, { useContext } from "react";
import { toast } from "react-toastify";
import { client } from "../utils";
import { FormWrapper } from "./Login";
import useInput from "../hooks/useInput";
import { UserContext } from "../context/UserContext";
import logo from "../assets/logo.png";
const Signup = ({ login }) => {
const { setUser } = useContext(UserContext);
const email = useInput("");
const fullname = useInput("");
const username = useInput("");
const password = useInput("");
const handleLogin = async (e) => {
e.preventDefault();
if (!email.value || !password.value || !username.value || !fullname.value) {
return toast.error("Please fill in all the fields");
}
if (username.value === "explore") {
return toast.error(
"The username you entered is not acceptable, try again"
);
}
const re = /^[a-z0-9]+$/i;
if (re.exec(username.value) === null) {
return toast.error(
"The username you entered is not acceptable, try again"
);
}
const body = {
email: email.value,
password: password.value,
username: username.value,
fullname: fullname.value,
};
try {
const { token } = await client("/auth/signup", { body });
localStorage.setItem("token", token);
} catch (err) {
return toast.error(err.message);
}
const user = await client("/auth/me");
setUser(user.data);
localStorage.setItem("user", JSON.stringify(user.data));
fullname.setValue("");
username.setValue("");
password.setValue("");
email.setValue("");
};
return (
<FormWrapper onSubmit={handleLogin}>
<img src={logo} alt="logo" />
<form>
<input
type="email"
placeholder="Email"
value={email.value}
onChange={email.onChange}
/>
<input
type="text"
placeholder="Full Name"
value={fullname.value}
onChange={fullname.onChange}
/>
<input
type="text"
placeholder="Username"
value={username.value}
onChange={username.onChange}
/>
<input
type="password"
placeholder="Password"
value={password.value}
onChange={password.onChange}
/>
<input type="submit" value="Sign up" className="signup-btn" />
</form>
<div>
<p>
Already have an account? <span onClick={login}>Login</span>
</p>
</div>
</FormWrapper>
);
};
export default Signup;
我有生以来第一次遇到这个错误。 有人可以帮我吗?
只需将 https 替换为 http在 api 调用 Z572D4E421E5E06B9BC121D8
REACT_APP_BACKEND_URL="http://127.0.0.1:2222"
您必须在 api 服务器中设置 ssl 证书才能使用 https
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.