使用 React npm start 启动服务器时，Axios GET('urlextension') 调用不会触发服务器端功能

Question

作为研究的一部分，我一直在尝试通过使用 React、NodeJS 和 MongoDB 创建一个简单的 Web 应用程序。我已经取得了一些进展，但是我陷入了通过 axios GET 请求调用服务器端函数以获取页面数据的阶段。

我已经通过仅运行 "node server/server.js" 然后调用 api url: "/api/images" 并且 它正在工作 测试了 api 端点> 并从数据库中给出结果。然而，如果我通过 React 和 npm start 启动服务器，那么 componentDidMount 内的 axios GET 调用似乎没有到达服务器端函数。我还测试了 GET 调用是否适用于外部 api 位置并且它正在工作。所以我的问题是，当我将 axios 与 React 一起使用时，为什么我无法访问我的服务器端功能？

如果您能看看并帮助我，我将不胜感激。我试图提供尽可能多的代码 sn-p 和文件夹设置信息。如果需要更多信息，请告诉我。

这是我的Folder Structure 这是我的 server.js 代码：

'use strict';
/** require dependencies */
const express = require("express");
const routes = require('./routes/');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
const helmet = require('helmet');


const app = express();
const router = express.Router();
const url = process.env.MONGODB_URI || "mongodb://localhost:27017/sharing_app";


/** connect to MongoDB datastore */
try {
        mongoose.connect(url, {
            //useMongoClient: true
        });    
    } catch (error) {
    
}

let port = 8080 || process.env.PORT;

/** set up routes {API Endpoints} */
routes(router);

/** set up middlewares */
app.use(cors());
app.use(bodyParser.json());
app.use(helmet());

app.use('/api', router);

/** start server */
app.listen(port, () => {
    console.log(`Server started at port: ${port}`);
});

这是我的路线/index.js 代码：

const contents = require(process.cwd()+'/server/routes/content.js');

module.exports = (router) => {
    
   console.log("In the contents:", contents);
   console.log("Routers:", router);
   contents(router);

};

这是我的 routes/content.js 代码：

// server/routes/content.js
var ImageController = require(process.cwd() + '/server/controllers/content_controller.js');

module.exports = (router) => {
    /**
     * get all articles
     */
    console.log("Trying to reach the GET");
    var imageController = new ImageController(); 
    router
        .route('/api/images')
        .get(function(req,res){
            console.log("Called the GET");
            imageController.getAllImages(req,res);
        });
};

{
  "name": "educative_materials_sharing_app_for_kids",
  "version": "1.0.0",
  "description": "A web app platform to enable exchanges of books, puzzles, toys and etc.",
  "main": "server.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "keywords": [
    "books",
    "toys",
    "puzzles",
    "educative",
    "materials",
    "for",
    "kids",
    "babies",
    "sharing",
    "platform"
  ],
  "author": "NA",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "connect-flash": "^0.1.1",
    "connect-mongodb-session": "^2.0.2",
    "cookie-parser": "^1.4.3",
    "cors": "^2.8.4",
    "dotenv": "^5.0.1",
    "express": "^4.16.3",
    "express-session": "^1.15.6",
    "helmet": "^3.12.1",
    "history": "^4.7.2",
    "http": "0.0.0",
    "marked": "^0.4.0",
    "medium-editor": "^5.23.3",
    "mongoose": "^5.1.3",
    "passport": "^0.4.0",
    "path": "^0.12.7",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-google-login": "^3.2.1",
    "react-loadable": "^5.4.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^4.0.8",
    "react-scripts": "^1.1.4",
    "redux": "^4.0.0",
    "redux-devtools-extension": "^2.13.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "websocket": "^1.0.26"
  }
}

客户端 React index.js 视图：

Client side React index.js view:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Switch} from 'react-router-dom';
import './index.css';

import App from './App.js';

import registerServiceWorker from './registerServiceWorker';

import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory();

ReactDOM.render((
    <div>
    <Router history={history}>
        <Switch>
            <Route exact path="/" component={App} />

<!-- begin snippet: js hide: false console: true babel: false -->

            <Route path="/**" component={App} />
        </Switch>
    </Router>
    </div>
), document.getElementById('root'));
registerServiceWorker();

Answer 1

我已将所有代码从 c9.io 转移到 Visual Studio，现在它可以工作了。