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

[TeeEm (TM)]

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}}

[Stennie_X (Stennie)]

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

[TeeEm (TM)]

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);
      });
  }, []);

[TeeEm (TM)]

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

[Lex_Soft]

The problem is you are using the same port for Node/Express server as MongoDB default port : const PORT = 27017;
Replace this constant with common port number used for Node/Express, such as 3000, 8000, 9000, etc.
You can then try to get data/resource from available endpoint (route) defined by your Node/Express app in the browser, like so :
localhost:3000/puzzle
assuming you are using 3000 as the port number for your Node server. If this works, the data fetching in your React app should work too.

[TeeEm (TM)]

That was it! I changed the port for Node/Express to 8000 and it works beautifully now.

Your response also helped me solve a second problem I had, where the front end wasn’t connecting properly with the backend. I was using the wrong port in the URL for my API call too and changing the port number there fixed that problem also.

Thanks so much for your help!