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

Question

我正在学习 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 的新手 :(

Answer 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');