ليش رفع على render معقد

ستحتاج إلى بعض الوقت لاكتساب خبرة نشر المشاريع على الاستضافة، ستواجهك مثل تلك المشاكل في البداية وستتعلم منها.

قبل أي شيء، هل الخادم يعمل بشكل سليم؟ قم بإختباره عن طريق postman بإرسال طلب إلى رابط الاستضافة، وفي حال لم يعمل تفقد رسائل الخطأ التي تظهر على الاستضافة من خلال لوحة التحكم

الخادم يعمل بشكل سليم ولا يوجد أي مشاكل فيه لكن عند رفعه على الريندر توقف الخادم مع اني كل خطوات التي نفذتها صحيحة

ما قصدته هو إختبار الخادم الذي قمت برفعه على الاستضافة وليس الخادم المحلي، أي إرسال طلب لعنوان الخادم على الاستضافة وليس localhost

في حال ظهرت مشكلة cors قم بتعديل الكود للسماح بجميع الطلبات من أي مصدر مؤقتًا لتفقد ما المشكلة:

app.use(cors());

app.use(cors()) تضع رأس الاستجابة Access-Control-Allow-Origin: * لإخبار المتصفح أن أي موقع ويب مسموح له بالوصول إلى الخادم.

log في ريندر مافيه اي مشاكل ورابط شغال لكن عند استخدامه في fetch لا يعمل وحتى مع app.use(cors());

أرسل صورة للرد الذي يظهر لك عند إرسال طلب Get إلى رابط الخادم على الاستضافة من المفترض أن تحصل على:

Hello Bun!

هي ب نسبة ل رابط ريندر 

لكنه لا يعمل مع مشروعي https://www-movies-app.netlify.app/

هاد رابط مستودع https://github.com/ZenZN99/Movies-App

import React, { useEffect, useState } from "react";
import "./register.css";
import toast from "react-hot-toast";
import { useNavigate } from "react-router-dom";
import AOS from "aos";
import "aos/dist/aos.css";
const Register = () => {
  const [form, setForm] = useState({
    username: "",
    email: "",
    password: "",
  });
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError("");
    try {
      const res = await fetch("https://movies-app-2-19xd.onrender.com/api/auth/register", {
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(form),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || "Something went wrong!");
      } else {
        localStorage.setItem("token", data.token);
        localStorage.setItem("username", data.user.username);
        toast.success(`Welcome ${data.user.username}`);
        setForm({ username: "", email: "", password: "" });
        navigate("/");
      }
    } catch (error) {
      console.log(error);

      setError("Network error. Please try again later.");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (error) {
      const timer = setTimeout(() => {
        setError("");
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, [error]);

  useEffect(() => {
    const token = localStorage.getItem("token");
    if (token) {
      navigate("/");
     toast("You are logged in with action", {duration:3000});
      return;
    }
  }, []);

  useEffect(() => {
    AOS.init({ duration: 2000 });
  }, []);

  return (
    <div className="register-container" data-aos="fade-up">
      <div className="register-wrapper">
        <div className="register-card">
          <h1 className="register-title">Create Account</h1>
          <p className="register-subtitle">Join our community today</p>

          <form onSubmit={handleSubmit} className="register-form">
            {error && <p className="error-message">{error}</p>}
            <input
              type="text"
              name="username"
              placeholder="Username"
              value={form.username}
              onChange={handleChange}
              required
            />
            <input
              type="email"
              name="email"
              placeholder="Email Address"
              value={form.email}
              onChange={handleChange}
              required
            />
            <input
              type="password"
              name="password"
              placeholder="Password"
              value={form.password}
              onChange={handleChange}
              required
            />

            <button type="submit" className="register-btn">
              {loading ? "Creating an account..." : "Register"}
            </button>
          </form>

          <p className="register-footer">
            Already have an account? <a href="/login">Login</a>
          </p>
        </div>
      </div>
    </div>
  );
};

export default Register;

import express from "express";
import dotenv from "dotenv";
import userRouter from "./routes/user.route";
import cors from "cors";

dotenv.config();
const app = express();
const port = process.env.PORT || 3000;
app.use(
  cors({
    origin: "https://www-movies-app.netlify.app",
    credentials: true,
  })
);
app.use(express.json());

app.use("/api/auth", userRouter);

app.get("/", (req, res) => {
  res.send("Hello Bun!");
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

قمت بتجربة تسجيل مستخدم وتم الأمر بشكل سليم:

لا تحاول فتح روابط التي تستقبل طلبات POST في المتصفح، فهي لن تعمل لأن المتصفح يرسل طلب get عند التوجه للرابط في شريط العنوان.