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;

我正在创建一个应用程序，如果你去/出租，它将获取数据并打印东西。这当前正在工作，我的数据库中的所有数据都在渲染现在我想去/ rental / 1或/ rental / 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) 我正在尝试从网址http://localhost:3000/api/listofrentals/2中抓取，并且不明白为什么＆＃34;出租＆＃34;部分在网址中。我的React服务器在localhost：3000上运行，node.js在localhost：30001上运行。我的React的package.json有"proxy": "http://localhost:3001/"

Answer 1

默认提取将访问您使用它的相对路径。您可以通过使用/.

启动网址来指定您想要绕过相对路径

Answer 2

如果您想更改基本网址以进行测试。您可以在Google中关闭网络安全并使用。在ubuntu命令行中它是

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

从反馈中获取API会向我发送错误的网址

2 个答案: