New Dec 28, 2024

Fastify CORS problem using Nginx as reverse proxy

Libraries, Frameworks, etc. All from Newest questions tagged vue.js - Stack Overflow View Fastify CORS problem using Nginx as reverse proxy on stackoverflow.com

I am using Nginx as a reverse proxy to forward http requests from a VueJS 3 frontend app to a Fastify backend server. During development, I run Vite serving the frontend on localhost:3001 and Fastify serving the backend on a server setup in Nginx as 'http://fastify.supabase:8000'. Below are all the configs.

When running the app and make a GET request with either Axios or Fetch, I get a CORS error saying the Origin is not allowed. The request is sending an authorization header, so the preflight is called and the CORS error happens then. But looking at the request header and the response header, the origin and allow-origin match? Fastify server is showing everything is OK.

How to resolve this? I need to send authorizations headers with the requests to handle database access.

Browser (Firefox) response headers:

HTTP/1.1 200 OK
Server: nginx/1.26.2
Date: Sat, 28 Dec 2024 14:29:54 GMT
Content-Length: 0
Connection: keep-alive
access-control-allow-origin: http://localhost:3001
access-control-allow-credentials: true
access-control-allow-methods: OPTION, GET,HEAD,PUT,PATCH,POST,DELETE
vary: Access-Control-Request-Headers
access-control-allow-headers: authorization,content-type
Access-Control-Allow-Origin: http://localhost:3001

Browser request headers:

OPTIONS / HTTP/1.1
Host: fastify.supabase
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization,content-type
Referer: http://localhost:3001/
Origin: http://localhost:3001
DNT: 1
Connection: keep-alive
Priority: u=4

Browser console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://fastify.supabase/. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:3001, http://localhost:3001’).

Fastify server logs:

[App] [08:37:00.774] INFO (232838): Server listening at http://127.0.0.1:8000
[App] [08:37:07.741] INFO (232838): incoming request
[App]     reqId: "req-1"
[App]     req: {
[App]       "method": "OPTIONS",
[App]       "url": "/",
[App]       "host": "fastify.supabase",
[App]       "remoteAddress": "127.0.0.1",
[App]       "remotePort": 38648
[App]     }
[App] [08:37:07.747] INFO (232838): request completed
[App]     reqId: "req-1"
[App]     res: {
[App]       "statusCode": 200
[App]     }
[App]     responseTime: 5.683508992195129

Nginx config:

#The Nginx server instance
server{
    listen 80;
    server_name fastify.supabase;

add_header 'Access-Control-Allow-Origin' 'http://localhost:3001';


location / {

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://127.0.0.1:8000;
proxy_pass_request_headers on;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $http_connection;
}

Fastify server CORS:

  fastify.register(cors, {
    origin: 'http://localhost:3001',
    methods: 'OPTION, GET,HEAD,PUT,PATCH,POST,DELETE',
    preflightContinue: true,
    credentials: true,
    optionsSuccessStatus: 204
  })

Vue Vite running on:

 VITE v6.0.1  ready in 1008 ms

➜  Local:   http://localhost:3001/
➜  Network: use --host to expose
➜  Vue DevTools: Open http://localhost:3001/devtools/ as a separate window
➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

Scroll to top