無法從前端獲取后端

Question

我正在嘗試通過分叉來建立一個回購。 我安裝了所有 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;

我有生以來第一次遇到這個錯誤。 有人可以幫我嗎？

Answer 1

只需將 https 替換為 http在 api 調用 Z572D4E421E5E06B9BC121D8

 REACT_APP_BACKEND_URL="http://127.0.0.1:2222"

您必須在 api 服務器中設置 ssl 證書才能使用 https