How to resolve Chrome cookies resulting in nodejs ERR_CONNECTION_RESET when I have to store cookies olve

Question

Currently making a MERN app, so I am using Node. I have the user's information stored in localstorage so when they refresh the page they are still logged in. Problem is, if I were to make any api calls to my backend it will result in a net::ERR_CONNECTION_RESET . And it is also weird that the error message will look something like: GET http://localhost:3000/api/roadmap/getAllRoadmapsButThumbnails net::ERR_CONNECTION_RESET , when localhost:5000 is my backend port but it is showing 3000, my client port.

My api calls perfectly fine when the user is logged out & thus there is nothing in the localstorage.

Has anyone encountered similar problems and have any insights?

What I have tried:

1. Changing proxy from just " http://localhost:5000 " to

   "proxy": { "secure": true, "target": { "host": "https://localhost", "port": 5000 } },

2. Using full path in axios requests, this resulted in a CORS error, and I didn't proceed to make the CORS thing work because using the full path might cause weird stuff when website is deployed, and fixing the proxy routing seemed like a priority

More of my code

server.js:

const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const multer = require("multer");
const path = require("path");
const passport = require("passport");
const users = require("./routes/api/users");
const roadmap = require("./routes/api/roadmap");

const app = express();

// Bodyparser middleware
app.use(
  bodyParser.urlencoded({
    extended: false
  })
);
app.use(bodyParser.json());
// DB Config
const db = require("./config/keys").mongoURI;
// Connect to MongoDB
mongoose
  .connect(
    db,
    { useNewUrlParser: true }
  )
  .then(() => console.log("MongoDB successfully connected"))
  .catch(err => console.log(err));

// Passport middleware
app.use(passport.initialize());
// Passport config
require("./config/passport")(passport);
// Routes
app.use("/api/roadmap", roadmap);
app.use("/api/users", users);

const port = process.env.PORT || 5000; // process.env.port is Heroku's port if you choose to deploy the app there

Everything is http right now, I didn't get errors like this in my last website which also utilized jwt stored in localstorage, that was about 5 months ago.

EDIT

new things I tried:

1. Configuring the proxy manually
2. Starting chrome without certificate

Answer 1

Solution for my case: Use fetch instead of axios. I didn't post any client code but I used to fetch the data with:

axios.get("/api/roadmap/getAllRoadmapsThumbnails")

now, simply do:

fetch("/api/roadmap/getAllRoadmapsButThumbnails", { method: "GET" })

Why does it work. I have no idea, maybe if I put a few headers in axios axios would function properly as well. Still there is something weird, in console you can see the fetch log (you might have to check the "Log XMLHttpRequests" checkbox in console), and it shows:

Fetch finished loading: GET "http://localhost:3000/api/roadmap/getAllRoadmapsButThumbnails".

While my backend is 5000 and so it should be localhost:5000/api/...

---

If you are new to this problem, and getting problems ranging from ERR_CONNECTION_RESET to FAILED_TO_LOAD_RESOURCES to other ERRs,

Try these:

1. try using fetch. And best to define headers like {method: "POST", headers: {"Content-Type" : "application/json"}

2. turn off chrome extensions (use incognito will automatically disable extensions)

3. for a CORS error download npm install cors and then do app.use(cors()) in your server.js, according to this: https://github.com/axios/axios/issues/1414

4. Manually set up proxy & starting chrome ignoring certificate