NodeJS + mysql app: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at Status code: 503

Question

i need to deploy my fullstack project to production. its connected to a mysql database and it's built with node.js and react. I followed this tutorial https://www.youtube.com/watch?v=nrG0tKSYMHc to create/deploy the server and backend to railway and the frontend to netlify but on the frontend i get this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mysql-------railway.app/films. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 503.

if i click on the backend domain above i get a railway error page saying "Application failed to respond". Does anyone know how to fix it? I've already doubled checked all the env variables just in case and also added some CORS code to the backend..

here's the server/index.js code:

import express from "express";
import mysql from "mysql";
import cors from "cors";
import dotenv from "dotenv";

dotenv.config();

const app = express();

app.use(
  cors({
    origin: "---frontend domain---",
    methods: ["GET", "POST", "PUT", "DELETE"],
    allowedHeaders: ["Content-Type"],
    credentials: true,
  })
);

app.options("*", cors());

const urlDB = `mysql://${process.env.MYSQLUSER}:${process.env.MYSQLPASSWORD}@${process.env.MYSQLHOST}:${process.env.MYSQLPORT}/${process.env.MYSQLDATABASE}`;

const db = mysql.createConnection(urlDB);

app.use(express.json());

app.use(cors());

app.get("/films", (req, res) => {
  const q = "SELECT * FROM films";
  db.query(q, (err, data) => {
    if (err) return res.json(err);
    return res.json(data);
  });
});

app.post("/films", (req, res) => {
  const q =
    "INSERT INTO films(`title`, `plot`, `poster`, `rating`, `release_year`) VALUES (?)";
  const values = [
    req.body.title,
    req.body.plot,
    req.body.poster,
    req.body.rating,
    req.body.release_year,
  ];

  db.query(q, [values], (err, data) => {
    if (err) return res.json(err);
    return res.json("Film has been added successfully");
  });
});

app.delete("/films/:id", (req, res) => {
  const filmId = req.params.id;
  const q = "DELETE FROM films WHERE id = ?";

  db.query(q, [filmId], (err, data) => {
    if (err) return res.json(err);
    return res.json("Film has been removed successfully");
  });
});

app.put("/films/:id", (req, res) => {
  const filmId = req.params.id;
  const q =
    "UPDATE films SET `title` = ?, `plot` = ?, `poster` = ?, `rating` = ?, `release_year` = ? WHERE id = ?";

  const values = [
    req.body.title,
    req.body.plot,
    req.body.poster,
    req.body.rating,
    req.body.release_year,
  ];

  db.query(q, [...values, filmId], (err, data) => {
    if (err) return res.json(err);
    return res.json("Film has been updated successfully");
  });
});

const PORT = process.env.MYSQLPORT;

app.listen(PORT, () => {
  console.log("Connected to backend!");
});

and here's client/index.js:

import React from "react";
import { useEffect } from "react";
import { useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";

const Films = () => {
  const [films, setFilms] = useState([]);

  useEffect(() => {
    const fetchAllMovies = async () => {
      try {
        const res = await axios.get(`${process.env.REACT_APP_MYSQL_URL}/films`);
        setFilms(res.data);
      } catch (err) {
        console.log(err);
      }
    };
    fetchAllMovies();
    console.log(films);
  }, []);

  const handleDelete = async (id) => {
    try {
      await axios.delete(`${process.env.REACT_APP_MYSQL_URL}/films/` + id);
      window.location.reload();
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
      <h1>Films</h1>
      <div>
        {films.map((film) => (
          <div key={film.id}>
            <h2>{film.title}</h2>
            {film.poster === null ? (
              <></>
            ) : (
              <img width={50} height={80} src={film.poster} />
            )}
            <p>{film.plot}</p>
            <p>{film.release_year}</p>
            <p>{film.rating}</p>
            <button onClick={() => handleDelete(film.id)}>Delete movie</button>
            <button>
              <Link to={`/update/${film.id}`}>Update</Link>
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Films;