Programmiererforum

import { useEffect, useState } from "react"

export const useFetch = (url, immediate = true) => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(immediate);
const BASE_URL = "http://localhost:3000/"

useEffect(() => {
const controller = new AbortController();
const signal = controller.signal;

const fetchData = async () => {
try {
const res = await fetch(BASE_URL + url, {
method: "GET",
credentials: "include",
signal
});
const json = await res.json();
setData(json);
} catch (err) {
if (err.name !== 'AbortError') setError(err);
} finally {
setLoading(false);
}
};

fetchData();

// Proper cleanup function
return () => controller.abort();
}, [url]);

return { data, loading, error };
}
< /code>
Und dies ist mein Backend -Servercode: < /p>
import route from "./routes/UserRoute.js";
import cors from 'cors'
import { express, mongoose, fileURLToPath, path, auth, cookieParser } from "./utils/ImortExport.js";
// import serverless from 'serverless-http';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// DB Config
mongoose.connect(process.env.DB_URL)
.then(() => console.log("✅ MongoDB connected"))
.catch(err => console.error("❌ MongoDB error:", err.message));

const PORT = process.env.PORT || 3000;
const app = express();

app.use(cors({
origin: 'http://localhost:5173', // your frontend URL
credentials: true, // allow cookies
}));
app.use(express.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '../public')));

// ----- Route -----
// app.get('/', (req, res) => {
//     res.sendFile(path.join(__dirname, 'client', 'index.html'));
// })

app.use('/api/v1', route);
app.use('/url', route);
app.listen(process.env.PORT);

Mein API -Anruf ist fehlgeschlagen.
Wenn ich meine API von Frontend Side aufrufe, ist mir dieser Fehler "Get http: // localhost: 3000/api/v1/Dashboard 401 (nicht autorisiert)" Dieser Fehler. Aber wenn ich nach dem Postman anrufe, läuft es perfekt. Aber es kann nicht repariert werden.[code]import { useEffect, useState } from "react"

export const useFetch = (url, immediate = true) => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(immediate);
const BASE_URL = "http://localhost:3000/"

useEffect(() => {
const controller = new AbortController();
const signal = controller.signal;

const fetchData = async () => {
try {
const res = await fetch(BASE_URL + url, {
method: "GET",
credentials: "include",
signal
});
const json = await res.json();
setData(json);
} catch (err) {
if (err.name !== 'AbortError') setError(err);
} finally {
setLoading(false);
}
};

fetchData();

// Proper cleanup function
return () => controller.abort();
}, [url]);

return { data, loading, error };
}
< /code>
Und dies ist mein Backend -Servercode: < /p>
import route from "./routes/UserRoute.js";
import cors from 'cors'
import { express, mongoose, fileURLToPath, path, auth, cookieParser } from "./utils/ImortExport.js";
// import serverless from 'serverless-http';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// DB Config
mongoose.connect(process.env.DB_URL)
.then(() => console.log("✅ MongoDB connected"))
.catch(err => console.error("❌ MongoDB error:", err.message));

const PORT = process.env.PORT || 3000;
const app = express();

app.use(cors({
origin: 'http://localhost:5173', // your frontend URL
credentials: true, // allow cookies
}));
app.use(express.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '../public')));

// ----- Route -----
// app.get('/', (req, res) => {
// res.sendFile(path.join(__dirname, 'client', 'index.html'));
// })

app.use('/api/v1', route);
app.use('/url', route);
app.listen(process.env.PORT);
[/code]