Проблема з інтеграцією Node.js API у React Native або React веб-додатки

4 Березня 2024 в 12:42 37

Однією з основних переваг сучасного веб-розробника є можливість створення різноманітних додатків, які взаємодіють між собою через API (інтерфейс програмування застосунків). Node.js, спільно з MongoDB, стають популярними інструментами для створення API, а AWS ElasticBean – чудовим хостингом для їх розгортання. Однак, навіть з використанням таких потужних інструментів, виникають проблеми, такі як те, що API працює добре в Postman, але не працює в React Native або React веб-додатках.

Однією з перших речей, які потрібно перевірити, є CORS (Cross-Origin Resource Sharing), який дозволяє ресурсам на веб-сервері запитувати дозвіл на доступ до вибраних ресурсів з іншого домену, ніж той, з якого був зроблений початковий запит. У даному випадку автор вже додав CORS до свого API, але не допомогло. Давайте розглянемо можливі причини цієї проблеми та шляхи її вирішення.

Modal:
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
const usersSchema = new Schema({
  mobile: String,
  password: String,
  fullName: String,
  gender: String,
  email: String,
  position: String,
  organization: String,
  skills: [],
  location: String,
  socialLink: String,
  story: String,
  headline: String,
  industry: String,
  experience: String,
  profilePic: String,
  createdAt: {
    type: Date,
    default: Date.now,
  },
});
module.exports = mongoose.model("users", usersSchema);
Service:
const usersModel = require("../models/user.modal");
exports.userGetAllService = async () => {
  return await usersModel.find();
};
Controller:
const { MongoClient, ObjectId } = require('mongodb');
const { userGetAllService } = require("../services/user.service");
exports.userGetAllController = async (req, res) => {
  try {
    const userGetAllExport = await userGetAllService();
    res.json({ data: userGetAllExport, status: "success", api:"GetAllUsers" });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
};
Route:
const express = require("express");
const { userGetAllController, userGetListController, userGetByIdController, userPasswordUpdateController } = require("../controllers/user.controller");
const router = express.Router();
router.route("/all/").get(userGetAllController);
router.route("/list/:id").get(userGetListController);
router.route("/:id").get(userGetByIdController);
router.route("/password/").put(userPasswordUpdateController);
module.exports = router;
APP:
const connectToDatabase = require("./db");
const express = require("express");
const jwt = require("jsonwebtoken");
const app = express();
const port = process.env.PORT || 3000;
const secretKey = process.env.SECRET_KEY;
const fileUpload = require('express-fileupload');
const AWS = require('aws-sdk');
AWS.config.update({ region: 'ap-south-1' })
app.use(fileUpload({
  limits: { fileSize: 50 * 1024 * 1024 },
}))
const userRouter = require("./routes/user.route");
app.use(express.json());
connectToDatabase();
app.use("/api/user", userRouter);
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});
module.exports = app;

Modal:

const mongoose = require("mongoose");

const Schema = mongoose.Schema;

const usersSchema = new Schema({

mobile: String,

password: String,

fullName: String,

gender: String,

email: String,

position: String,

organization: String,

skills: [],

location: String,

socialLink: String,

story: String,

headline: String,

industry: String,

experience: String,

profilePic: String,

createdAt: {

type: Date,

default: Date.now,

});

module.exports = mongoose.model("users", usersSchema);

Service:

const usersModel = require("../models/user.modal");

exports.userGetAllService = async () => {

return await usersModel.find();

};

Controller:

const { MongoClient, ObjectId } = require('mongodb');

const { userGetAllService } = require("../services/user.service");

exports.userGetAllController = async (req, res) => {

try {

const userGetAllExport = await userGetAllService();

res.json({ data: userGetAllExport, status: "success", api:"GetAllUsers" });

} catch (err) {

res.status(500).json({ error: err.message });

}

};

Route:

const express = require("express");

const { userGetAllController, userGetListController, userGetByIdController, userPasswordUpdateController } = require("../controllers/user.controller");

const router = express.Router();

router.route("/all/").get(userGetAllController);

router.route("/list/:id").get(userGetListController);

router.route("/:id").get(userGetByIdController);

router.route("/password/").put(userPasswordUpdateController);

module.exports = router;

APP:

const connectToDatabase = require("./db");

const express = require("express");

const jwt = require("jsonwebtoken");

const app = express();

const port = process.env.PORT || 3000;

const secretKey = process.env.SECRET_KEY;

const fileUpload = require('express-fileupload');

const AWS = require('aws-sdk');

AWS.config.update({ region: 'ap-south-1' })

app.use(fileUpload({

limits: { fileSize: 50 * 1024 * 1024 },

}))

const userRouter = require("./routes/user.route");

app.use(express.json());

connectToDatabase();

app.use("/api/user", userRouter);

app.use((req, res, next) => {

res.header("Access-Control-Allow-Origin", "*");

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

next();

});

app.listen(port, () => {

console.log(`Server is running on port ${port}`);

});

module.exports = app;

Важливо перевірити, чи API відповідає на запити у React Native або React веб-додатках. Іноді можуть виникнути проблеми з HTTP-запитами, такими як невірний URL або параметри запиту. Також варто перевірити, чи не виникли помилки під час розгортання або конфігурації API.

Інша можлива причина проблеми – проблеми з мережею або обмеженнями на веб-сервері. Наприклад, деякі хостинг-провайдери можуть блокувати деякі типи запитів або встановлювати обмеження на кількість запитів, які можуть бути зроблені з одного IP-адреси протягом певного періоду часу.

Щоб вирішити проблему, спробуйте наступні кроки:

Перевірте конфігурацію CORS на веб-сервері. Впевніться, що вона дозволяє запити з вашого домену.
Перевірте правильність URL і параметрів запиту у вашому React Native або React веб-додатку.
Перевірте логи вашого веб-сервера на наявність помилок під час обробки запитів.
Використовуйте інструменти розробника браузера або мобільного пристрою для перевірки мережевих запитів та отримання більш детальної інформації про помилки.

Наведений вище код є лише прикладом робочого Node.js API. Якщо у вас виникають проблеми з іншим кодом або іншими конфігураційними параметрами, переконайтеся, що вони також перевірені і відповідають очікуванням.