fix: CORS setup to allow localhost:3000 to access api endpoint

AppFlowy-IO · Jan 8, 2025 · ac94673 · ac94673
1 parent 95b4560
commit ac94673
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 22 deletions.
diff --git a/doc/DEPLOYMENT.md b/doc/DEPLOYMENT.md
@@ -164,8 +164,18 @@ docker logs <NAME>
   to be served on a different origin that the one used for AppFlowy Cloud (eg. if you are hosting `appflowy cloud`
   on `appflowy.home.com`, `appflowy_web` may be hosted on `web.appflowy.home.com`). The source code and deployment
   guide can be found in this [repository](https://github.com/AppFlowy-IO/AppFlowy-Web).
-- To prevent CORS issues, you will need to change `set $appflowy_web "http://localhost:3000";` in `nginx/nginx.conf`
-  to the origin where you are hosting `appflowy_web`.
+- To prevent CORS issues, you will need to add your AppFlowy Web origin. By default, we allow requests from `localhost:3000`,
+  using, the configuration below:
+  ```
+  map $http_origin $cors_origin {
+    # AppFlowy Web origin
+    "~^http://localhost:3000$" $http_origin;
+    default "null";
+  }
+  ```
+  Replace `http://localhost:3000` with your AppFlowy Web origin.
+
+
 
 ## Ports
 

diff --git a/nginx/nginx.conf b/nginx/nginx.conf
@@ -14,6 +14,12 @@ http {
        ''      close;
     }
 
+    map $http_origin $cors_origin {
+        # AppFlowy Web origin
+        "~^http://localhost:3000$" $http_origin;
+        default "null";
+    }
+
     server {
         listen 8080;
 
@@ -33,7 +39,6 @@ http {
         client_max_body_size 10M;
 
         underscores_in_headers on;
-        set $appflowy_web_origin "http://localhost:3000";
         set $appflowy_cloud_backend "http://appflowy_cloud:8000";
         set $gotrue_backend "http://gotrue:9999";
         set $admin_frontend_backend "http://admin_frontend:3000";
@@ -66,19 +71,6 @@ http {
         }
 
         # AppFlowy-Cloud
-        # created a separate location block for handling CORS preflight (OPTIONS) requests specifically for the /api endpoint.
-        location = /api/options {
-            if ($http_origin ~* ($appflowy_web_origin)) {
-                add_header 'Access-Control-Allow-Origin' $http_origin;
-            }
-            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE, PATCH';
-            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, Accept, Client-Version';
-            add_header 'Access-Control-Max-Age' 3600;
-            add_header 'Content-Type' 'text/plain; charset=utf-8';
-            add_header 'Content-Length' 0;
-            return 204;
-        }
-
         location /api/chat {
             proxy_pass $appflowy_cloud_backend;
 
@@ -101,9 +93,7 @@ http {
             proxy_set_header Host $http_host;
 
             # Handle CORS
-            if ($http_origin ~* ($appflowy_web_origin)) {
-                add_header 'Access-Control-Allow-Origin' $http_origin always;
-            }
+            add_header 'Access-Control-Allow-Origin' $cors_origin always;
             add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS' always;
             add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, Accept' always;
             add_header 'Access-Control-Max-Age' 3600 always;
@@ -130,10 +120,17 @@ http {
             proxy_set_header X-Forwarded-Proto $scheme;
 
             # Set CORS headers for other requests
-            if ($http_origin ~* ($appflowy_web_origin)) {
-                add_header 'Access-Control-Allow-Origin' $http_origin always;
+
+            if ($request_method = 'OPTIONS') {
+                add_header 'Access-Control-Allow-Origin' $cors_origin always;
+                add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS' always;
+                add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, Accept, Client-Version' always;
+                add_header 'Access-Control-Max-Age' 3600 always;
+                return 204;
             }
-            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH' always;
+
+            add_header 'Access-Control-Allow-Origin' $cors_origin always;
+            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS' always;
             add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, Accept, Client-Version' always;
             add_header 'Access-Control-Max-Age' 3600 always;