尝试获取Express和React连接时出现404错误

Question

我正在尝试获取一个简单的API请求来获取比特币值，在浏览器地址http://127.0.1:3000/中，在我的chrome浏览器中，我在浏览器上得到一个“无法获取/”，当我打开dev tools时得到一个404，上面写着“获取http://127.0.1:3000/404（Not Found）”。

当我访问http://127.0.0.1:3000/etf时，我得到了一个我需要的数据对象，所以我不认为这是axios的问题。

下面是我的package.json

{
  "name": "etfportfolio",
  "version": "1.0.0",
  "description": "Tool to use axios to get the MTD returns for ETFs managed in an ETF portfolio and compare to their benchmark of the S&P 500 and Barclays AGG.",
  "main": "server/server.js",
  "scripts": {
    "react-dev": "webpack -d --watch",
    "test": "test",
    "start": "nodemon --watch server/server.js",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/WDHudson/ETFPortfolio.git"
  },
  "author": "William Hudson",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/WDHudson/ETFPortfolio/issues"
  },
  "homepage": "https://github.com/WDHudson/ETFPortfolio#readme",
  "dependencies": {
    "axios": "^0.21.1",
    "babel-polyfill": "^6.26.0",
    "body-parser": "latest",
    "chart.js": "latest",
    "express": "latest",
    "json-server": "latest",
    "mathjs": "^7.1.0",
    "moment": "latest",
    "morgan": "latest",
    "path": "latest",
    "react": "latest",
    "react-dom": "latest"
  },
  "devDependencies": {
    "@babel/core": "latest",
    "@babel/preset-env": "latest",
    "@babel/preset-react": "latest",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "latest",
    "css-loader": "latest",
    "file-loader": "latest",
    "html-webpack-plugin": "latest",
    "nodemon": "latest",
    "style-loader": "latest",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-hot-middleware": "^2.24.3"
  }
}

下面是我的webpack.config.js

var path = require('path');
var SRC_DIR = path.join(__dirname, '/client');
var DIST_DIR = path.join(__dirname, '/public');

module.exports = {
  entry: `${SRC_DIR}/index.jsx`,
  output: {
    filename: 'bundle.js',
    path: DIST_DIR
  },
  module: {
    rules: [{ test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader" }],
  }
};

下面是我的server.js文件

var express = require('express');
var bodyParser = require('body-parser');
const axios = require("axios");

var app = express();
app.use(express.static(__dirname));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/etf', (req, res) => {
  console.log('check')
  axios.get(`https://api.coindesk.com/v1/bpi/historical/close.json?start=2019-08-07&end=2020-08-06`)
    .then(response => res.send(response.data.bpi))
    .then(res => console.log(res.body))
    .catch(err => console.log('error with app.get: ', err))
})


app.listen(3000, function () {
  console.log('listening on port 3000!');
});

module.exports = app;

下面是我的app.jsx文件

import React from 'react';
import axios from 'axios';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      info: []
    }
  }

  componentDidMount() {
    axios.get('/etf')
      .then(res => this.setState({ info: JSON.stringify(res.data) }))
      .catch(err => console.log('error with axios.get: ', err))
  }

  render() {
    return (
      <div>
        <h1>TEST</h1>
      </div>
    )
  }
};

export default App;

Answer 1

看起来您缺少了localhost:3000/的GET函数。

您可以尝试在server.js文件中添加该函数。

null

html prettyprint-override">app.get('/', (req, res) => {
 res.send('Test');
});