Question

第一个问题来自我们,处于停滞状态。

tldr:Watstal沿用了YouTube的录像,从课程代码的“金字塔”链条下载,但我似乎在从我所读到的所有其他问题的路上遇到问题。

我一直沿用YouTube视频。 https://www.you Programme.com/watch?v=MpQbwtSiZ7E。我从他的链接。从我从中看到的所有问题来看,似乎是一个棘手的问题。我不知道这是否在克隆过程中,或者在录像之后,但浏览器检查的网络部分显示用户浏览量为404。注册号.jsx (googlechrome) axios.jsx (in firefox)和204 OPTIONS 预飞行。大部分情况与他实际的异构体代码非常相似,但后来却在指数.js中。

enter image description here api/.env

API_PORT = 5173
MONGO_URL = "mongodb+srv://admin:[email protected]/?retryWrites=true&w=majority&appName=Cluster0"

客户

VITE_API_BASE_URL=http://localhost:4000/

RegisterPage.jsx

import {Link} from "react-router-dom";
import {useState} from "react";
import axios from "axios";

export default function RegisterPage() {
  const [name,setName] = useState(  );
  const [email,setEmail] = useState(  );
  const [password,setPassword] = useState(  );
  
  async function registerUser(ev) {
    ev.preventDefault();
    try {
      await axios.post( /register , {
        name,
        email,
        password,
      });
      alert( Registration successful. Now you can log in );
    } catch (e) {
      alert( Registration failed. Please try again later );
    }
  }
  return (
    <div className="mt-4 grow flex items-center justify-around">
      <div className="mb-64">
        <h1 className="text-4xl text-center mb-4">Register</h1>
        <form className="max-w-md mx-auto" onSubmit={registerUser}>
          <input type="text"
                 placeholder="John Doe"
                 value={name}
                 onChange={ev => setName(ev.target.value)} />
          <input type="email"
                 placeholder="[email protected]"
                 value={email}
                 onChange={ev => setEmail(ev.target.value)} />
          <input type="password"
                 placeholder="password"
                 value={password}
                 onChange={ev => setPassword(ev.target.value)} />
          <button className="primary">Register</button>
          <div className="text-center py-2 text-gray-500">
            Already a member? <Link className="underline text-black" to={ /login }>Login</Link>
          </div>
        </form>
      </div>
    </div>
  );
}

指数.js

const express = require( express );
const cors = require( cors );
const mongoose = require("mongoose");
const bcrypt = require( bcryptjs );
const jwt = require( jsonwebtoken );
const User = require( ./models/User.js );
const Place = require( ./models/Place.js );
const Booking = require( ./models/Booking.js );
const cookieParser = require( cookie-parser );
const imageDownloader = require( image-downloader );
const {S3Client, PutObjectCommand} = require( @aws-sdk/client-s3 );
const multer = require( multer );
const fs = require( fs );
const mime = require( mime-types );

require( dotenv ).config();
const app = express();

const bcryptSalt = bcrypt.genSaltSync(10);
const jwtSecret =  fasefraw4r5r3wq45wdfgw34twdfg ;
const bucket =  dawid-booking-app ;

app.use(express.json());
app.use(cookieParser());
app.use( /uploads , express.static(__dirname+ /uploads ));
app.use(cors({
  credentials: true,
  origin:  http://localhost:5173 ,
}));

async function uploadToS3(path, originalFilename, mimetype) {
  const client = new S3Client({
    region:  us-east-1 ,
    credentials: {
      accessKeyId: process.env.S3_ACCESS_KEY,
      secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    },
  });
  const parts = originalFilename.split( . );
  const ext = parts[parts.length - 1];
  const newFilename = Date.now() +  .  + ext;
  await client.send(new PutObjectCommand({
    Bucket: bucket,
    Body: fs.readFileSync(path),
    Key: newFilename,
    ContentType: mimetype,
    ACL:  public-read ,
  }));
  return `https://${bucket}.s3.amazonaws.com/${newFilename}`;
}

function getUserDataFromReq(req) {
  return new Promise((resolve, reject) => {
    jwt.verify(req.cookies.token, jwtSecret, {}, async (err, userData) => {
      if (err) throw err;
      resolve(userData);
    });
  });
}

app.get( /api/test , (req,res) => {
  mongoose.connect(process.env.MONGO_URL);
  res.json( test ok );
});
console.log(process.env.MONGO_URL);
app.post( /api/register , async (req,res) => {
  mongoose.connect(process.env.MONGO_URL);
  const {name,email,password} = req.body;

  try {
    const userDoc = await User.create({
      name,
      email,
      password:bcrypt.hashSync(password, bcryptSalt),
    });
    res.json(userDoc);
  } catch (e) {
    res.status(422).json(e);
  }

});

app.post( /api/login , async (req,res) => {
  mongoose.connect(process.env.MONGO_URL);
  const {email,password} = req.body;
  const userDoc = await User.findOne({email});
  if (userDoc) {
    const passOk = bcrypt.compareSync(password, userDoc.password);
    if (passOk) {
      jwt.sign({
        email:userDoc.email,
        id:userDoc._id
      }, jwtSecret, {}, (err,token) => {
        if (err) throw err;
        res.cookie( token , token).json(userDoc);
      });
    } else {
      res.status(422).json( pass not ok );
    }
  } else {
    res.json( not found );
  }
});

app.get( /api/profile , (req,res) => {
  mongoose.connect(process.env.MONGO_URL);
  const {token} = req.cookies;
  if (token) {
    jwt.verify(token, jwtSecret, {}, async (err, userData) => {
      if (err) throw err;
      const {name,email,_id} = await User.findById(userData.id);
      res.json({name,email,_id});
    });
  } else {
    res.json(null);
  }
});

app.post( /api/logout , (req,res) => {
  res.cookie( token ,   ).json(true);
});


app.post( /api/upload-by-link , async (req,res) => {
  const {link} = req.body;
  const newName =  photo  + Date.now() +  .jpg ;
  await imageDownloader.image({
    url: link,
    dest:  /tmp/  +newName,
  });
  const url = await uploadToS3( /tmp/  +newName, newName, mime.lookup( /tmp/  +newName));
  res.json(url);
});

const photosMiddleware = multer({dest: /tmp });
app.post( /api/upload , photosMiddleware.array( photos , 100), async (req,res) => {
  const uploadedFiles = [];
  for (let i = 0; i < req.files.length; i++) {
    const {path,originalname,mimetype} = req.files[i];
    const url = await uploadToS3(path, originalname, mimetype);
    uploadedFiles.push(url);
  }
  res.json(uploadedFiles);
});

app.post( /api/places , (req,res) => {
  mongoose.connect(process.env.MONGO_URL);
  const {token} = req.cookies;
  const {
    title,address,addedPhotos,description,price,
    perks,extraInfo,checkIn,checkOut,maxGuests,
  } = req.body;
  jwt.verify(token, jwtSecret, {}, async (err, userData) => {
    if (err) throw err;
    const placeDoc = await Place.create({
      owner:userData.id,price,
      title,address,photos:addedPhotos,description,
      perks,extraInfo,checkIn,checkOut,maxGuests,
    });
    res.json(placeDoc);
  });
});

app.get( /api/user-places , (req,res) => {
  mongoose.connect(process.env.MONGO_URL);
  const {token} = req.cookies;
  jwt.verify(token, jwtSecret, {}, async (err, userData) => {
    const {id} = userData;
    res.json( await Place.find({owner:id}) );
  });
});

app.get( /api/places/:id , async (req,res) => {
  mongoose.connect(process.env.MONGO_URL);
  const {id} = req.params;
  res.json(await Place.findById(id));
});

app.put( /api/places , async (req,res) => {
  mongoose.connect(process.env.MONGO_URL);
  const {token} = req.cookies;
  const {
    id, title,address,addedPhotos,description,
    perks,extraInfo,checkIn,checkOut,maxGuests,price,
  } = req.body;
  jwt.verify(token, jwtSecret, {}, async (err, userData) => {
    if (err) throw err;
    const placeDoc = await Place.findById(id);
    if (userData.id === placeDoc.owner.toString()) {
      placeDoc.set({
        title,address,photos:addedPhotos,description,
        perks,extraInfo,checkIn,checkOut,maxGuests,price,
      });
      await placeDoc.save();
      res.json( ok );
    }
  });
});

app.get( /api/places , async (req,res) => {
  mongoose.connect(process.env.MONGO_URL);
  res.json( await Place.find() );
});

app.post( /api/bookings , async (req, res) => {
  mongoose.connect(process.env.MONGO_URL);
  const userData = await getUserDataFromReq(req);
  const {
    place,checkIn,checkOut,numberOfGuests,name,phone,price,
  } = req.body;
  Booking.create({
    place,checkIn,checkOut,numberOfGuests,name,phone,price,
    user:userData.id,
  }).then((doc) => {
    res.json(doc);
  }).catch((err) => {
    throw err;
  });
});



app.get( /api/bookings , async (req,res) => {
  mongoose.connect(process.env.MONGO_URL);
  const userData = await getUserDataFromReq(req);
  res.json( await Booking.find({user:userData.id}).populate( place ) );
});

app.listen(4000);

用户背景

import {createContext, useEffect, useState} from "react";
import axios from "axios";
import {data} from "autoprefixer";

export const UserContext = createContext({});

export function UserContextProvider({children}) {
  const [user,setUser] = useState(null);
  const [ready,setReady] = useState(false);
  useEffect(() => {
    if (!user) {
      axios.get( /profile ).then(({data}) => {
        setUser(data);
        setReady(true);
      });
    }
  }, []);
  return (
    <UserContext.Provider value={{user,setUser,ready}}>
      {children}
    </UserContext.Provider>
  );
}

I have tried to change app.listen(); in 指数.js (at the end) to 4000 3000 5000 5173. I have tried to change the API_PORT = 5173 in .env to 4000 5173 5000. I ahve asked Perplexity ai and chatgpt 3.5 but they only give generic answers taht have not worked. I do not know what else to do. This deeply shows my lack of knowledge but I would also like to see someone get answer because almost all the answers on the other questions or forums have not worked for me.

Edit:我用VITE_API_BASE_URL=http:// localhost:4000/ in it。在“孩子”提出大量建议之后。改用了皮单(57173);改用了皮书(40 000)。

Answer 1

在源头背书上快速看,它像它试图,在Axios baseURL<<>>>>>>>。使用

axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL;

但是,>.

你也需要为客户和服务器使用不同的港口。缩略语可在api/index.js中使用类似内容。

app.listen(4000);

以及<代码>client/env文档...

VITE_API_BASE_URL=http://localhost:4000/api/

Note that I ve included the /api base path in the base URL since all your routes seem to include it and your client-side code doesn t.

友情链接