从反应中获取 API 发送错误 URL

Question

学习 React.js 和 Node.js 并在后端使用 Express API 并在前端使用 React.js 制作一个简单的 crud 应用程序。我的 React.js 中的 App.js 看起来像这样。

    `import React, { Component } from 'react';
     import './App.css';
     import Rentals from './components/Rentals';
     import Idpage from './components/Idpage';

     import {
      BrowserRouter as Router,
      Route,
      Link
     } from 'react-router-dom';

   class App extends Component {

   render() {
    return (
    <div className="mainappdiv">
     <Router>
          <main>
            <Route exact path="/" component={Home} />
            <Route exact path="/rentals" component={Rentals} />
            <Route path="/rentals/:propertyid" component={Idpage} />
          </main>             
        </div>           
    </Router>
  </div>
      );
     }}

 export default App;

我正在制作一个应用程序，当您访问 /rentals 时，它会获取数据并打印内容。这目前正在工作，我的数据库中的所有数据都在呈现。
现在我正尝试转到 /rentals/1 或 /rentals/2，然后尝试仅打印该 ID 的列表。

   import React, { Component } from 'react';

   class Idpage extends Component {

   componentDidMount() {
    fetch('api/listofrentals/2')
        .then((response)=>{
            console.log(response)
            return response.json()
        })
        .then((singlerent)=>{
            console.log(singlerent)
        })
}


render() {
    return (
        <div>
            <p>this is the id page solo</p>
            <p>{this.props.match.params.propertyid}</p>
        </div>

    );
}}

   export default Idpage;

当我这样做时，我收到一条错误消息 GET http://localhost:3000/rentals/api/listofrentals/2 404 (Not Found) 我正在尝试从 URL http://localhost:3000/api/listofrentals/2 中获取，但不明白为什么 "rentals" 部分在 url 中。我的 React 服务器在 localhost:3000 上是运行，node.js 在 localhost:30001 上是运行。我的 React 的 package.json 有这个 "proxy": "http://localhost:3001/"

Answer 1

默认情况下，Fetch 将访问您使用它的位置的相对路径。您可以指定要绕过相对路径，方法是将 url 设为 /.

fetch('/api/listofrentals/2')

Answer 2

以防万一你想改变基础url进行测试。您可以在 Google 中关闭网络安全并使用。在 ubuntu 命令行中是

google-chrome --disable-web-security --user-data-dir

从反应中获取 API 发送错误 URL

Fetching API from react sending me wrong URL

api

node.js

reactjs

fetch-api