405 Not Allowed in Production

[TurtleWolfe]

link to repo
link to bug report

I've been following Lama Dev's Social Networking Tutorial
but running it in docker containers, which he doesn't do in the tutorial. One of those containers is Traefik, which acts as a gateway for 80 and 443 and one more for an admin panel, but I haven't opened 8800 for the API because I was under the understanding that React should still see it in docker's default network, I'm not sure if the 405 is coming from the API or if that's still in React, what I've read on 405 says it's usually in the client and the line that logs the error is in React but it's in a failed call, so maybe the 405 message is an Axios response, it's saying the connection isn't allowed. I'm not sure what else to try changing?

It seems to work fine locally in Development But not in Production, It's usually up at https:geoLARP.com, if it's down for a few minutes I'm probably trying a rebuild on the server and it'll be back up shortly.

I've also wondered if I need to remove CORS, he has them in the repo but never mentions them in the video..

The only environment variable from dev to prod that I think might make a difference is LOCAL_HOST, I'm changing it to geolarp.com, should I be including the HTTP:// too?

export DEV_MAIL=janeDOE@mail.com
export LOCAL_HOST=localhost
export MongoDB_PASSWORD=butterzCUPz
export MongoDB_USERNAME=janeDOE
export WORDPRESS_DB_HOST=db
export WORDPRESS_DB_NAME=exampledb
export WORDPRESS_DB_PASSWORD=examplepass
export WORDPRESS_DB_USER=exampleuser
docker-compose up -d --build
docker-compose down -v --remove-orphans

I started to try through PostMan, but currently, I've not left the API open to the public, I was expecting React would see it over the docker default network by just changing the proxy to the API container. so I've changed localhost:8800 to mernlama:8800 in an .env file

Regist.jsx

import axios from "axios";
import { useRef } from "react";
import { useHistory } from "react-router";
import "./register.css";

export default function Register() {
  const username = useRef();
  const email = useRef();
  const password = useRef();
  const passwordAgain = useRef();
  const history = useHistory();

  const handleClick = async (e) => {
    e.preventDefault();
    // console.log(email.current.value);
    if (passwordAgain.current.value !== password.current.value) {
      passwordAgain.current.setCustomValidity('PassWords do not Match');
    } else {
      const user = {
        username: username.current.value,
        email: email.current.value,
        password: password.current.value,
      };
      try {
        await axios.post("/auth/register", user);
        history.push("/login");
      } catch (err) {
        console.log(err);
      }
    }
  };
  return (
    <div className="login">
      <div className="loginWrapper">
        <div className="loginLeft">
          <h3 className="loginLogo">geoLARP</h3>
          <span className="loginDesc">
            GeoLocated
          </span>
          <span className="loginDesc">
            Live Action Role Playing
          </span>
        </div>
        <div className="loginRight">
          <form className="loginBox" onSubmit={handleClick} >
            <input
              placeholder="Username"
              required
              className="loginInput"
              ref={username}
            />
            <input
              placeholder="please use a disposable Email"
              type='email'
              required
              className="loginInput"
              ref={email}
            />
            <input
              placeholder="Password"
              type='password'
              required
              minLength="6"
              className="loginInput"
              ref={password}
            />
            <input
              placeholder="Password Again"
              type='password'
              required
              className="loginInput"
              ref={passwordAgain}
            />
            <button className="loginButton" type='submit' >Sign Up</button>
            <button className="loginRegisterButton">
              Log into Account
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

expressAPI/routes/auth.js

const router = require('express').Router();
const User = require('../models/User');
const bcrypt = require('bcrypt');

// REGISTER
router.post('/register', async (req, res) => {

  try {
    // generate a salty password
    const salt = await bcrypt.genSalt(10);
    const hashedPassword = await bcrypt.hash(req.body.password, salt);

    // create a new user
    const newUser = new User({
      username: req.body.username,
      email: req.body.email,
      password: hashedPassword,
    });

    // save the user and respond
    const user = await newUser.save();
    console.log(user);
    res.status(200)
      // .json({ message: 'Registered User with API AUTH Route', user: user._id });
      .json(user);
  } catch (err) {
    res.status(500).json(err);
  }

}); // GET /api/auth


// LOGIN
router.post('/login', async (req, res) => {
  try {
    // find the user
    const user = await User.findOne({ email: req.body.email });

    // check if the user exists
    !user && res.status(404).json('User not found');


    // check if the password is correct
    const validPassword = await bcrypt.compare(req.body.password, user.password);
    !validPassword && res.status(400).json('Invalid Password');

    // respond with the user
    res.status(200).json(user);
  } catch (err) {
    res.status(500).json(err);
  }
}); // GET /api/auth/login

module.exports = router;
// export default router;

UPDATE
I've started looking at the NGINX configuration. If I understand correctly the React proxy is just for local development. So I've been looking at how Nginx Configures the Proxy Pass-Through.. These are the 2 I've tried so far, the commented out is what I tried first, but I don't have the experience with Nginx to know which settings I really need. I got Bad GateWay with the commented-out settings.

nginx.conf

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  # location /api {
  #   resolver 127.0.0.11;
  #   proxy_set_header X-Forwarded-Host $host;
  #   proxy_set_header X-Forwarded-Server $host;
  #   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  #   proxy_pass http://mernlama:8800/api;
  # }

 location /api {
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header X-NginX-Proxy true;
   proxy_pass http://mernlama:8800/api;
   proxy_ssl_session_reuse off;
   proxy_set_header Host $http_host;
   proxy_cache_bypass $http_upgrade;
   proxy_redirect off;
 }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}