时间戳

首页 > 解决方案 > 云IDE（MERN Stack）上的React API通信拒绝

javascript - 云IDE（MERN Stack）上的React API通信拒绝

问题描述

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

我决定使用一个名为 goorm IDE ( https://ide.goorm.io ) 的云平台 IDE，它类似于 cloud 9 IDE，随着我的教程，我意识到一个简单的问题，测试环境是有点不同，因为我无法访问我机器上的本地主机（或者至少我不知道如何访问。）

在后端工作并没有太大问题，因为这个 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，因为这是一个云 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)

标签： javascriptnode.jsreactjsexpress

解决方案

看来你有CORS错误，我通过安装CORS扩展解决了这个问题Goolge Chrome

推荐阅读