Error in react app: "It looks like you are trying to access MongoDB over HTTP on the native driver port"

I’m totally new to node/mongodb… I’m trying to retrieve data for my react app using Mongoose on Mac OS Catalina. Running mongod --version gives me 6.0.1. I have MongoDB running (I ran brew services start mongodb-community and my server consoles out Database connected: mongodb://localhost:27017/wheelPuzzles) but when I try to hit my GET endpoint using axios both in browser and Postman, I get:
It looks like you are trying to access MongoDB over HTTP on the native driver port.
I’ve been searching for 2 days now and cannot figure out why I’m getting this error. What am I missing please? Can anyone help? Thanks!

This is my error log, in case that helps:

{"t":{"$date":"2022-11-06T16:41:17.247-05:00"},"s":"I",  "c":"NETWORK",  "id":22943,   "ctx":"listener","msg":"Connection accepted","attr":{"remote":"[::1]:59904","uuid":"02520f8e-5a07-43b0-bfb2-64c48b07359a","connectionId":3,"connectionCount":1}}
{"t":{"$date":"2022-11-06T16:41:17.248-05:00"},"s":"I",  "c":"NETWORK",  "id":22944,   "ctx":"conn3","msg":"Connection ended","attr":{"remote":"[::1]:59904","uuid":"02520f8e-5a07-43b0-bfb2-64c48b07359a","connectionId":3,"connectionCount":0}}
{"t":{"$date":"2022-11-06T16:41:17.248-05:00"},"s":"I",  "c":"NETWORK",  "id":22943,   "ctx":"listener","msg":"Connection accepted","attr":{"remote":"[::1]:59905","uuid":"03a595a8-c6b8-4f9d-b3e9-9dbc2987c4f2","connectionId":4,"connectionCount":1}}
{"t":{"$date":"2022-11-06T16:41:17.249-05:00"},"s":"I",  "c":"NETWORK",  "id":22988,   "ctx":"conn4","msg":"Error receiving request from client. Ending connection from remote","attr":{"error":{"code":17,"codeName":"ProtocolError","errmsg":"Client sent an HTTP request over a native MongoDB connection"},"remote":"[::1]:59905","connectionId":4}}
{"t":{"$date":"2022-11-06T16:41:17.249-05:00"},"s":"I",  "c":"NETWORK",  "id":22944,   "ctx":"conn4","msg":"Connection ended","attr":{"remote":"[::1]:59905","uuid":"03a595a8-c6b8-4f9d-b3e9-9dbc2987c4f2","connectionId":4,"connectionCount":0}}

Welcome to the MongoDB community @TeeEm !

The error message you are encountering indicates a misconfigured client is making a connection to your MongoDB deployment and sending HTTP requests instead of using the MongoDB Wire Protocol.

How is your Axios app loading Mongoose to connect to your deployment? Can you share a snippet of code with any credentials redacted?

I suspect you may have an axios.get() request that is trying to fetch a Mongoose model or MongoDB URI (which would result in this error).

Regards,
Stennie

Thank you for your response Stennie!
I’m providing some code that’ll hopefully help.

This is my index.js:

const app = require("express")();
const PORT = 27017;
const express = require("express");
const Puzzle = require("./src/models/puzzle.js");

const mongoose = require("mongoose");
const url = "mongodb://localhost:27017/wheelPuzzles";
const db = mongoose.connection;
const bodyParser = require("body-parser");
mongoose.connect(url, { useNewUrlParser: true });

db.once("open", (_) => {
  console.log("Database connected:", url);
});

db.on("error", (err) => {
  console.error("connection error:", err);
});

app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.listen(PORT, () => console.log(`IT'S WORKING on http://localhost:${PORT}`));

app.get("/puzzle", (req, res) => {
  Puzzle.aggregate([{ $sample: { size: 1 } }]).then((data) => {
    res.send(data);
  });
});

puzzle.js:

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const PuzzleSchema = new Schema({
  category: String,
  puzzle: String,
});

module.exports = mongoose.model("Puzzle", PuzzleSchema);

and useEffect from App.js:

useEffect(() => {
    axios
      .get("puzzle")
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }, []);

Bumping this question, in case anyone has any ideas about how to solve this error? Thanks!