a

api/app/backend/settings.py

@@ -51,6 +51,9 @@ MIDDLEWARE = [
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
+    'django.middleware.common.CommonMiddleware',
+    'corsheaders.middleware.CorsMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
 ]
 
 ROOT_URLCONF = "backend.urls"
@@ -129,3 +132,7 @@ DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 ACCOUNT_SIGNUP_PASSWORD_VERIFICATION = False
 
 AUTH_PASSWORD_VALIDATORS = {}
+
+CORS_ALLOWED_ORIGINS = [
+    "*"
+]

api/requirements.txt

@@ -1,3 +1,4 @@
 django
 django-rest-framework
+django-cors-headers
 pygments

docker-compose.yml

@@ -14,6 +14,10 @@ services:
             context: react
         ports:
             - "3000"
+        environment:
+            - WDS_SOCKET_PORT=0
+        # volumes:
+        #     - ./docker_cache/node_modules:/app/node_modules
     nginx:
         image: nginx:1.23.4
         volumes:

nginx.conf

@@ -2,6 +2,15 @@ server {
     listen 80;
     server_name 192.168.1.121;
     location / {
+        proxy_hide_header 'Access-Control-Allow-Origin';
+        add_header 'Access-Control-Allow-Origin' '*' always;
+
+        proxy_hide_header 'Access-Control-Allow-Headers';
+        add_header 'Access-Control-Allow-Headers' '*' always;
+
+        proxy_hide_header 'Access-Control-Allow-Methods';
+        add_header 'Access-Control-Allow-Methods' '*' always;
+
         proxy_pass http://react:3000/;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
@@ -10,9 +19,14 @@ server {
         proxy_cache off;
     }
     location /api/ {
-        add_header 'Access-Control-Allow-Origin' '*';
-        add_header 'Access-Control-Allow-Headers' '*';
-        add_header 'Access-Control-Allow-Methods' '*';
+        proxy_hide_header 'Access-Control-Allow-Origin';
+        add_header 'Access-Control-Allow-Origin' '*' always;
+
+        proxy_hide_header 'Access-Control-Allow-Headers';
+        add_header 'Access-Control-Allow-Headers' '*' always;
+
+        proxy_hide_header 'Access-Control-Allow-Methods';
+        add_header 'Access-Control-Allow-Methods' '*' always;
 
         proxy_pass http://api:8000/api/;
         proxy_set_header Host $host;

react/Dockerfile

@@ -6,7 +6,7 @@ COPY /app /app
 # COPY package-lock.json /app/package-lock.json
 
 # Same as npm install
-# RUN npm ci
+RUN npm install
 
 # COPY . /app
 #

react/app/src/context/AuthContext.jsx

@@ -22,7 +22,7 @@ export const AuthProvider = ({ children }) => {
   const history = useNavigate();
 
   const loginUser = async (username, password) => {
-    const response = await fetch("http://127.0.0.1:8000/api/auth/token/", {
+    const response = await fetch("http://127.0.0.1/api/auth/token/", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -47,7 +47,7 @@ export const AuthProvider = ({ children }) => {
   };
 
   const registerUser = async (username, password) => {
-    const response = await fetch("http://127.0.0.1:8000/api/auth/register/", {
+    const response = await fetch("http://127.0.0.1/api/auth/register/", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

react/app/src/utils/useAxios.jsx

@@ -4,7 +4,7 @@ import dayjs from "dayjs";
 import { useContext } from "react";
 import AuthContext from "../context/AuthContext";
 
-const baseURL = "http://127.0.0.1:8000/api/auth";
+const baseURL = "http://127.0.0.1/api/auth";
 
 const useAxios = () => {
   const { authTokens, setUser, setAuthTokens } = useContext(AuthContext);