时间戳

首页 > 解决方案 > 尝试让 Express 和 React 连接时出现 404 错误

javascript - 尝试让 Express 和 React 连接时出现 404 错误

问题描述

我正在尝试获取一个简单的 API 请求来获取比特币值，并且在我的 chrome 浏览器中的浏览器地址http://127.0.0.1:3000/中，我在浏览器上得到“无法获取 /”，当我打开时得到 404打开显示“GET http://127.0.0.1:3000/404（未找到）”的开发工具

当我访问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;

标签： javascriptnode.jsreactjsexpressaxios

解决方案

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

您可以尝试在 server.js 文件中添加此功能。

app.get('/', (req, res) => {
 res.send('Test');
});

如果在浏览器上它在访问 localhost:3000 时返回一个“Test”字符串，很可能您正在使用相同或不同的端口进行反应。

如果要渲染结果，可以使用：

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>
        
        {this.state.info.map((data, index) => (
          <div>{data}</div>
        ))
        }
      </div>
    )
  }
};

export default App;

您可以参考此文档以获取列表 https://reactjs.org/docs/lists-and-keys.html

推荐阅读