从其他设备访问时前端和服务器连接问题

Question

好吧，伙计们，我在 MERN 堆栈上创建了一个小型笔记 Web 应用程序。前端在 localhost:3000 上运行，后端在 localhost:5000 上运行，我使用 axios 从后端获取所有请求和响应。在后端，我使用 app.use(cors()) 来避免任何连接问题。 所以问题是，它在我托管它的电脑上运行得很好，但是当我尝试从我的另一个设备（与我的电脑连接到相同的wifi）访问它时，我在地址栏中输入：3000，它显示了前端，但是当我尝试保存笔记或获取它们时，它不起作用。但是当我访问 :8000/get 时，我可以看到我的所有笔记都保存在那里。 所以最后的问题是，它在托管设备上完美工作，但另一个设备（连接到同一 wifi）前端和后端不能一起工作，但是当单独访问各自的端口时可以访问它们。 为了方便起见，我将附加我的主要 React 组件文件和 server.js 文件

Create.jsx（主要反应组件）

"use client"
import React, { useState, useEffect } from 'react'
import axios from "axios";
function Create(){
    useEffect(()=>{
        axios.get("http://localhost:5000/get")
        .then(result => setnotes(result.data))
        .catch(err => console.log(err))
        }, [])
    const [notes, setnotes]= useState([]);
    const [note, setnote]=useState();
    const addNote=()=>{
        axios.post("http://localhost:5000/add", {note: note})
        .then(result => console.log(result))
        .catch(err => console.log(err));
        document.getElementById("input").value=""

    }
    const removeNote=(id)=>{
        axios.delete("http://localhost:5000/delete/"+id)
        .catch(err => console.log(err))
    }
    return(
        <div>
            <textarea className='form' placeholder='Enter note' onChange={(e)=>setnote(e.target.value)} name="" id="input" cols="30" rows="10"></textarea>
            <br />
            <button onClick={addNote} className="button" type="button">Create</button>
            {
                notes.length===0
                ?
                <div><h2>No notes at the moment</h2></div>
                :
                notes.map(note => (
                    <>
                    <div className='result'>
                        {note.note}
                    </div>
                        <button onClick={()=> removeNote(note._id)} className='delete'>Delete</button>
                        </>
                ))
            }
        </div>
    )
}

export default Create

server.js（服务器入口点）

const express=require('express');
const mongoose=require("mongoose");
const cors=require("cors");
const collection=require("./models/note.js");
mongoose.connect("mongodb+srv://<username>:<password>@cluster0.fetyubc.mongodb.net/")
const app=express();
app.use(cors());
app.use(express.json());

app.get("/get", (req, res)=>{
    collection.find()
    .then(result => res.json(result))
    .catch(err => console.log(err));
})
app.post("/add", (req, res)=>{
    const note=req.body.note;
    collection.create({
        note: note
    }).then(result => res.json(result))
    .catch(err => console.log(err))
})

app.delete("/delete/:id", (req, res)=>{
    const {id}=req.params;
    collection.findByIdAndDelete({_id: id})
    .then(result => res.json(result))
    .catch(err => console.log(err));
})

app.listen(5000, ()=>{
    console.log("server is running")
})

Answer 1

问题发生在你的手机上，因为你告诉 javascript 你想向 localhost:5000 发出请求

发生的正常情况是 javascript 访问当前计算机上的本地主机，如果您的手机访问您手机的本地主机（最后您的手机只是另一台也可以有服务器的计算机）

它尝试向在端口 5000 上运行的电话服务器发出请求，但没有任何请求，因为服务器正在您的计算机上运行

当您从计算机访问时，它会尝试连接到端口 5000 上的本地计算机（您的电脑）的本地主机，但在这种情况下，您的计算机实际上在那里运行服务器

您可以通过将 localhost 替换为计算机本地 ip 地址来解决此问题

 axios.get("http://<Put your PC local ip address here>:5000/get")

我已经在我的机器上完成了

fetch("http://192.168.1.9:5000/get")

将 localhost 替换为我的电脑本地 IP 地址 192.168.1.9

如何获取本地IP地址

在基于 Linux 的机器上如何获取本地 IP 地址

在 Windows 上 如何获取 Windows 本地 IP 地址