GET http://localhost:3000/:/localhost:4000 404（未找到）

Posted 2023-03-04

【中文标题】GET http://localhost:3000/:/localhost:4000 404（未找到）

【英文标题】：GET http://localhost:3000/:/localhost:4000 404 (Not Found)

【发布时间】：2021-09-14 18:05:22

【问题描述】：

我正在学习 react 和 nodejs， 我正在尝试使用 axios 和 cors 从 react 调用我在后端的内容 但我收到以下错误：

GET http://localhost:3000/://localhost:4000/estudiantes 404 (Not Found)

这是我的 App.js

function App() 

const [estudiante, guardarEstudiante] = useState([]);

useEffect(() => 
  const consultarApi = () =>
    clienteAxios.get('/estudiantes')
    .then(respuesta =>
      console.log(respuesta)

    )
    .catch(error =>
      console.log('desde catch')
      console.log(error)
    )
  
  consultarApi();
);

  console.log(process.env.REACT_APP_BACKEND_URL);
  return (
    <Router>
      <Switch>
        <Route exact path="/" component = Estudiante/>   
        <Route exact path="/user" component = User/>
        
      </Switch>
    </Router>
  );


export default App;

这是我后面的 index.js

const express = require('express');
const mongoose = require('mongoose');
const routes = require('./routes');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();

app.use(cors());

mongoose.Promise = global.Promise;
mongoose.connect('mongodb://localhost/bremm', 
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false
);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded(extended: true));
 
app.use('/',routes())

app.listen(4000, ()=> 
    console.log('Servidor funcionando')
)

我的 .env 文件

REACT_APP_BACKEND_URL = http::/localhost:4000

我的配置文件

import axios from 'axios';
const clienteAxios = axios.create(
    baseURL: process.env.REACT_APP_BACKEND_URL

);
export default clienteAxios;

我来自后端的路线

const express = require('express');
const router = express.Router();
const estudianteController = require('../controllers/estudianteController');
const userController = require('../controllers/userController');

module.exports = function()
    router.get('/',()=>
        console.log('En home')
    );
    router.post('/estudiante',estudianteController.nuevoEstudiante);
    router.get('/estudiantes',estudianteController.getEstudiantes);
    router.get('/estudiante/:id',estudianteController.getEstudiante);
    router.put('/estudiante/:id',estudianteController.updateEstudiante);
    router.delete('/estudiante/:id',estudianteController.deleteEstudiante);


    return router;

getEstudiantes() 方法从数据库中获取所有学生，并且应该打印而不是错误，如果我从节点的 url 输入，如下图所示

希望你能帮助我，我知道我是 react 和 node 的新手 :(

【参考方案1】：

在我看来，您似乎在 .env 文件中错误地格式化了后端 url。从我在错误消息http://localhost:3000/://localhost:4000/estudiantes 中可以看到，您不是直接联系您的后端，而是将端点附加到前端的位置。您可能想要隔离http://localhost:4000/estudiantes。尝试改变

REACT_APP_BACKEND_URL = http::/localhost:4000

到

REACT_APP_BACKEND_URL = http://localhost:4000

注意正斜杠的区别。

或者，您可以创建一个新文件 api.js，如下所示：

export default "http://localhost:4000";

然后您可以像这样将其导入您的页面：

import API from './path/to/api.js';
...
clienteAxios.get(API+'/estudiantes');

【讨论】：

谢谢你的工作，REACT_APP_BACKEND_URL = localhost:4000 我觉得我在使用双字符时遇到了严重的问题