POST API returning 404 (Not Found) when being used in app, works fine with CURL

I have a chat app that I'm working on that uses MongoDB, Express API and Socket.io for a backend. When I try to POST data to the API from within the app, it gives a 404 error and the request fails. But when I use CURL to try to POST data, it works and data is saved in MongoDB

Here's the server.js code where I create the API:

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

const app = express();
const server = http.createServer(app);
const io = require("socket.io")(server, {
    cors: {
        origin: "*",
    }
  });

const Conversation = require('./database/ConversationModel');
const Message = require('./database/MessageModel');

mongoose
  .connect('<connection_string>?retryWrites=true&w=majority', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log('Connected to MongoDB');
    server.listen(5173, () => {
      console.log('Server listening on port 5173');
    });
  })
  .catch((error) => {
    console.error('Failed to connect to MongoDB:', error);
  });

io.on('connection', (socket) => {
  const { id } = socket.handshake.query;

  socket.join(id);

  socket.on('send-message', async ({ recipients, text }) => {
    try {
      // Save the message to the database
      const message = new Message({
        conversationId: recipients.join('-'),
        sender: id,
        text,
      });
      await message.save();

      // Emit the message to all recipients' sockets
      recipients.forEach((recipient) => {
        const newRecipients = recipients.filter((r) => r !== recipient);
        newRecipients.push(id);
        socket.broadcast.to(recipient).emit('receive-message', {
          recipients: newRecipients,
          sender: id,
          text,
        });
      });
    } catch (error) {
      console.error('Error sending message:', error);
    }
  });
});

// API endpoints

app.use(express.json());

app.get('/api/conversations', async (req, res) => {
  try {
    const conversations = await Conversation.find().populate('messages');
    res.json(conversations);
  } catch (error) {
    console.error('Error fetching conversations:', error);
    res.status(500).json({ error: 'Failed to fetch conversations' });
  }
});

app.post('/api/conversations', async (req, res) => {
    const { recipients } = req.body;
  
    try {
      const conversation = new Conversation({
        recipients,
      });
      await conversation.save();
      res.status(201).json(conversation);
    } catch (error) {
      console.error('Error creating conversation:', error);
      res.status(500).json({ error: 'Failed to create conversation' });
    }
  });

app.post('/api/messages', async (req, res) => {
  const { conversationId, sender, text } = req.body;

  try {
    const message = new Message({ conversationId, sender, text });
    await message.save();
    res.status(201).json(message);
  } catch (error) {
    console.error('Error saving message:', error);
    res.status(500).json({ error: 'Failed to save message' });
  }
});

Front-end/client code:

useEffect(() => {

    fetchConversations();
  }, []);

  async function fetchConversations() {
    try {
      const response = await fetch('/api/conversations');
      if (!response.ok) {
        throw new Error('Failed to fetch conversations');
      }
      const data = await response.json();
      setConversations(data);
    } catch (error) {
      console.error('Error fetching conversations:', error.message);
    }
  }

  function createConversation(recipients) {
    fetch('/api/conversations', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ recipients }),
    })
      .then((response) => {
        if (!response.ok) {
            throw new Error('Failed to create conversation');
        }
        return response.json();
      })
      .then((data) => {
        console.log('data')
        setConversations((prevConversations) => [
          ...prevConversations,
          data,
        ]);
      })
      .catch((error) => {
        console.error('Error creating conversation:', error.message);
      });
  }

Conversation model:

const mongoose = require('mongoose');

const conversationSchema = new mongoose.Schema({
  recipients: [{
    type: mongoose.Schema.Types.ObjectId,
    ref: 'Friend',
    required: true
  }],
  messages: [{
    type: mongoose.Schema.Types.ObjectId,
    ref: 'Message'
  }]
});

const Conversation = mongoose.model('Conversation', conversationSchema);

module.exports = Conversation;

I've tried testing the API multiple times and it works every time apart from when accessed from the client app

It turns out I just didn't realise that I had to run my client and server on different ports. I knew they had to be ran separately but I thought that just meant different processes and I'd had errors previously with running on different ports. Everything works now