Requests.js:7 GET http://localhost:3001/testing net::ERR_CONNECTION_REFUSED。 Apache 服务器, Express, React App, Fetching , Hosting

Question

我已经搜索过，有很多像这样的问题的完整代码，但是在阅读 cmets 和帖子时，有一些建议，他们说他们尝试了一些东西，但没有发布他们明确做出的实际改变。我真的会这样做。

所以这是我不知道在发布时如何设置 React 应用程序和服务器之间的通信。所以在测试和托管的机器上...... fetch() 工作得很好。当我在另一台笔记本电脑或手机上尝试时，我收到Requests.js:7 GET http://localhost:3001/testing net::ERR_CONNECTION_REFUSED.

我使用 Apache 和 raspberrypi 设置服务器进行测试。

根据我的阅读，我认为这可能与另一台计算机上的 localhost 不是本地的有关。我如何让它发挥作用？

这是一个示例链接：http://uptoptest.hopto.org/

这里是示例链接的代码：https://github.com/monochromaticmau/testingLiveWebsite

我应该提供 apache 的文件夹吗？我认为这是一件简单的事情，我只是想念如何以正确的方式正确地使 server.js 可用。

Requests.js

const Data = {};
const baseUrl = 'http://localhost:3001'

Data.getTest = () => {
  let url  = `${baseUrl}/testing`;
  return fetch(url).then(response => {
    if (!response.ok) {
      return new Promise(resolve => resolve([]));
    }
    return response.json().then(jsonResponse => {
      return jsonResponse.test
    });
  });
};

server.js

const express = require('express')
const app = express()
const cors = require('cors')


const PORT = process.env.PORT || 3001

app.use(express.static('public')); //'public' folder contains js, css, images

app.use(cors());
app.use(express.json());

app.use((req,res,next)=>{
    console.log(`Request!!`)
    console.log(req.originalUrl)
    console.log(req.path)
    
    //res.setHeader('Access-Control-Allow-Origin', '*')
    next();
})

app.get('/testing', (req,res,next)=>{
    console.log('TEST REQUEST')
    res.send({test: "Data blah blah"})
})




app.listen(PORT, ()=>{
    console.log(`Listening on Port ${PORT}`)
})

//Used for Testing Server
module.exports = app;

你们是非常聪明的人......请不要侵入我的小 pi，如果你知道怎么做。

Answer 1

解决方案很简单。我必须将const baseUrl = 'http://localhost:3001' 更新为 const baseUrl = 'http://uptoptest.hopto.org:3001' 并打开我路由器上的 3001 端口。