fix: resolve CORS issues via reverse proxy configuration (Vite, Nginx, Apache)

.env.example

@@ -8,7 +8,7 @@ PORT=4321
 
 # Run Talawa-api locally in your system, and put its url into the same.
 
-REACT_APP_TALAWA_URL=http://localhost:4000/graphql
+REACT_APP_TALAWA_URL=/graphql
 
 # Do you want to setup and use "I'm not a robot" Checkbox (Google Recaptcha)?
 # If no, leave blank, else write yes
@@ -24,7 +24,7 @@ REACT_APP_USE_RECAPTCHA=
 REACT_APP_RECAPTCHA_SITE_KEY=
 
 # has to be inserted in the env file to use websocket based features.
-REACT_APP_BACKEND_WEBSOCKET_URL=ws://localhost:4000/graphql
+REACT_APP_BACKEND_WEBSOCKET_URL=/graphql
 
 # If you want to logs Compiletime and Runtime error , warning and info write YES or if u want to  
 # keep the console clean leave it blank

CONTRIBUTING.md

@@ -8,12 +8,10 @@ If you are new to contributing to open source, please read the Open Source Guide
 
 <!-- toc -->
 
-- [Contributing to Talawa-Admin](#contributing-to-talawa-admin)
-  - [Table of Contents](#table-of-contents)
-  - [General](#general)
-  - [Testing and Code Quality](#testing-and-code-quality)
-    - [Quick Reference](#quick-reference)
-  - [Making Contributions](#making-contributions)
+- [General](#general)
+- [Testing and Code Quality](#testing-and-code-quality)
+  - [Quick Reference](#quick-reference)
+- [Making Contributions](#making-contributions)
 
 <!-- tocstop -->
 

config/docker/setup/apache.conf

@@ -0,0 +1,21 @@
+<VirtualHost *:80>
+    ServerName localhost
+    DocumentRoot /usr/share/nginx/html
+
+    # Proxy GraphQL requests to the internal API container
+    ProxyPass /graphql http://api:4000/graphql
+    ProxyPassReverse /graphql http://api:4000/graphql
+
+    # Handle WebSocket upgrades
+    RewriteEngine On
+    RewriteCond %{HTTP:Upgrade} =websocket [NC]
+    RewriteRule /graphql/(.*)           ws://api:4000/graphql/$1 [P,L]
+
+    # Serve React App (Fallback to index.html for routing)
+    <Directory /usr/share/nginx/html>
+        Options Indexes FollowSymLinks
+        AllowOverride All
+        Require all granted
+        FallbackResource /index.html
+    </Directory>
+</VirtualHost>

config/docker/setup/nginx.conf

@@ -10,13 +10,7 @@ server {
     }
 
     location /graphql {
-        proxy_pass http://host.docker.internal:4000/graphql/;
-
-        # Enable CORS
-        add_header Access-Control-Allow-Origin https://test.talawa.io; 
-        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
-        add_header Access-Control-Allow-Headers "Content-Type, Authorization";
-        add_header Access-Control-Allow-Credentials true;
+        proxy_pass http://api:4000;
 
 
         # Proxy headers

config/vite.config.ts

@@ -61,5 +61,12 @@ export default defineConfig({
     host: '0.0.0.0',
     // Uses PORT environment variable, defaults to 4321
     port: PORT,
+    proxy: {
+      '/graphql': {
+        target: 'http://localhost:4000',
+        changeOrigin: true,
+        secure: false,
+      },
+    },
   },
 });

docs/docs/docs/getting-started/configuration.md

@@ -68,6 +68,15 @@ If you are trying to access Talawa Admin from a remote host with the API URL con
 REACT_APP_TALAWA_URL="http://YOUR-REMOTE-ADDRESS:4000/graphql"
 
 ```
+:::tip Proxy Configuration
+To avoid CORS issues when hosting the Admin and API on different IP addresses, you can use a **relative path** for the backend URL.
+
+Talawa-Admin includes a pre-configured Reverse Proxy (via Vite in Dev, and Nginx/Apache in Prod).
+
+**Recommended Configuration:**
+```bash
+REACT_APP_TALAWA_URL=/graphql
+REACT_APP_BACKEND_WEBSOCKET_URL=/graphql
 
 #### Setting up REACT_APP_BACKEND_WEBSOCKET_URL in .env file