在云IDE (MERN堆栈)上响应API通信垃圾

Question

我正在学习以下教程中的MERN堆栈。https://medium.com/@beaucarnes/learn-the-mern-stack-by-building-an-exercise-tracker-mern-tutorial-59c13c1237a1

我决定使用一个名为goorm (https://ide.goorm.io)的云平台IDE，它类似于Cloud9IDE，在遵循教程的过程中，我意识到一个简单的问题:测试环境没有什么不同，因为我无法访问机器上的本地主机(或者至少我不知道如何访问)。

在后端工作并没有什么问题，因为这个IDE提供了一个我可以访问的域，我可以只运行server.js (不是整个react )并轻松地测试API端点。但是现在当我学习前端的时候，我运行了整个react应用程序，我发现我的server.js无法像以前那样只运行服务器时，我会被拒绝从连接如下。

下面的代码是我从前端使用的用于调用服务器的API的实际代码。

axios.post('http://localhost:5000/users/add', user).then(res => console.log(res.data));
// I tried changing the url to external domain.. changing the directory.. with no luck..

下面是server.js文件的代码。

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');

require('dotenv').config();

const app = express();
const port = process.env.PORT || 5000;

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

const uri = process.env.ATLAS_URI;
mongoose.connect(uri, { useNewUrlParser: true, useCreateIndex: true }
);

const connection = mongoose.connection;
connection.once('open', () => {
    console.log("Mongo DB database connection established successfully");
});

const exercisesRouter = require('./routes/exercises');
const usersRouter = require('./routes/users');

app.use('/exercises', exercisesRouter);
app.use('/users', usersRouter);

app.listen(port, process.env.IP, () => {
    console.log(`Server is running on port: ${port}`);
});

下面是我试图调用API的页面的url。https://zimen.run.goorm.io/user

其他环境信息

从IDE：https://zimen.run.goorm.io:3000

• React应用程序目录中运行URL和端口设置的
• ：：express、create、mongoose、cors

我想知道在一个干净的当地环境中重新开始整个项目是否更好。如果有人能帮忙，我会很感激的。

任何其他需要的信息，请让我知道，或者你可以真正加入IDE在线，因为这是一个云IDE。

提前谢谢你。

==更新==

对不起，我忘了附上错误日志。

xhr.js:178 POST https://localhost:3000/users/add net::ERR_CONNECTION_REFUSED
Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:83)

Answer 1

看起来您有CORS错误，我通过在Goolge Chrome上安装CORS扩展来解决这个问题。

Answer 2

在Nodejs服务器端设置PORT=5000，并将默认端口设置为PORT=3000。

为Nodejs设置您自己单独的自定义的“运行URL和端口”并作出反应。

示例：

https://[custom-client-side-name].goorm.io

在PORT=3000和

https://[custom-server-side-name].goorm.io

PORT=5000的Nodejs

对于在React侧的Axios命令，使用：

axios.post('https://my-server-side.goorm.io/users/add', user).then(res => console.log(res.data));

类似地，在您已经建立的自定义网站上可以找到React前端：https://my-client-side.goorm.io/[custom-routes]。