CORS Issue: POST Request Blocked from Vercel Frontend to Railway Backend

nisrina2207
FREE

15 days ago

Hi Railway Support Team, I am experiencing a persistent CORS issue when trying to make POST requests from my Vercel frontend to my Node.js backend hosted on Railway. **Problem Description:** My frontend (hosted on Vercel) is trying to send POST requests (e.g., for login, transactions) to my backend (hosted on Railway). The browser consistently blocks these requests with a CORS error: "Access to fetch at 'https://aplikasi-kasir-pos-production.up.railway.app/api/auth/login' from origin 'https://aplikasi-kasir-pos.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource." This error specifically indicates that the preflight OPTIONS request is not receiving the correct 'Access-Control-Allow-Origin' header from the Railway backend. **Steps I have already taken:** 1. **CORS Configuration in server.js:** I have correctly configured the cors middleware in my backend/src/server.js file to allow my Vercel frontend's origin. I have even tried the most permissive app.use(cors()) (wildcard origin) for debugging purposes, but the issue persists. * My server.js (current CORS config): ```javascript app.use(cors({ origin: '[https://aplikasi-kasir-pos.vercel.app](https://aplikasi-kasir-pos.vercel.app)', // Or app.use(cors()) for wildcard methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], credentials: true, allowedHeaders: ['Content-Type', 'Authorization'] })); app.options('*', cors()); // Explicitly handle preflight ``` 2. **Code Verification:** I have thoroughly verified that the server.js code on my GitHub repository is correct and includes the proper CORS setup. 3. **Railway Service Re-creation:** I have deleted and recreated the backend service on Railway multiple times to ensure a fresh deployment environment. 4. **Deployment Status:** I have confirmed that the backend deployments on Railway are successful and the service is active. **Relevant URLs:** * **GitHub Repository:** https://github.com/Nisrina2207/aplikasi-kasir-pos * **Vercel Frontend URL:** https://aplikasi-kasir-pos.vercel.app * **Railway Backend URL:** https://aplikasi-kasir-pos-production.up.railway.app **Console Error Log (from browser):**

$10 Bounty

4 Replies

teereckzi
FREE

15 days ago

app.options('*', cors());: You have this line, which is good practice for explicit preflight handling. Just ensure it's placed before your routes that require CORS. If a route handles the OPTIONS request before your CORS middleware, it won't apply the necessary headers.

Generally, app.use(cors(corsOptions)) should be at the top of your middleware stack, after express.json() and express.urlencoded()

Also make absolutely sure https://aplikasi-kasir-pos.vercel.app is the exact origin the browser is sending in the Origin header of the preflight request. A common mistake is a subtle difference (e.g., trailing slash, www subdomain, or missing https). Check your browser's network tab for the Origin header of the failed preflight request.

Hopefully one of these solutions helps. Good luck!


teereckzi

app.options('*', cors());: You have this line, which is good practice for explicit preflight handling. Just ensure it's placed before your routes that require CORS. If a route handles the OPTIONS request before your CORS middleware, it won't apply the necessary headers. Generally, app.use(cors(corsOptions)) should be at the top of your middleware stack, after express.json() and express.urlencoded()Also make absolutely sure https://aplikasi-kasir-pos.vercel.app is the exact origin the browser is sending in the Origin header of the preflight request. A common mistake is a subtle difference (e.g., trailing slash, www subdomain, or missing https). Check your browser's network tab for the Origin header of the failed preflight request.Hopefully one of these solutions helps. Good luck!

teereckzi
FREE

15 days ago

The most valuable debugging tool here is your browser's developer tools btw..

My recommended steps would be to:

  1. Clear cache and refresh: Make sure you're not seeing cached responses.

  2. Filter by OPTIONS: Look for the OPTIONS request to https://aplikasi-kasir-pos-production.up.railway.app/api/auth/login.

  3. Examine Request Headers: Check the Origin header sent by your Vercel frontend.

  4. Examine Response Headers: This is where the problem lies. The OPTIONS response from Railway must contain:

    • Access-Control-Allow-Origin: https://aplikasi-kasir-pos.vercel.app (or * if you're testing with the wildcard)

    • Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS (or the specific methods you allow)

    • Access-Control-Allow-Headers: Content-Type, Authorization (or the headers your frontend sends)

    • Access-Control-Allow-Credentials: true (if you're using credentials: true)

    • A 204 No Content status code (this is typical for a successful preflight, though 200 is also acceptable).

    If any of these are missing or incorrect in the OPTIONS response, that's your smoking gun.


nisrina2207
FREE

14 days ago

Hi Railway Team, I am still encountering the same persistent CORS error, even after following all the latest suggestions and ensuring all code changes are deployed. The error message in the browser console is consistently: "Access to fetch at 'https://aplikasi-kasir-pos-production.up.railway.app/api/auth/login' from origin 'https://aplikasi-kasir-pos.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource." Key observations: 1. My backend service on Railway is now successfully deploying and running (logs show "Server running on port 8080"). 2. I have verified the server.js code on my GitHub repository (https://github.com/Nisrina2207/aplikasi-kasir-pos/blob/main/backend/src/server.js) to ensure the cors middleware is configured correctly, including explicit OPTIONS handling and the exact Vercel frontend origin (`https://aplikasi-kasir-pos.vercel.app` without a trailing slash). 3. I have performed multiple full redeployments, including deleting and recreating the backend service on Railway. 4. The browser's network tab still shows the preflight OPTIONS request failing with no Access-Control-Allow-Origin header present in the response. Given that the application code is confirmed to be correctly setting the CORS headers, and the backend is running, this strongly suggests an issue within Railway's infrastructure (e.g., a proxy, load balancer, or firewall) that is preventing the necessary CORS headers from being returned in the preflight OPTIONS response. Could you please investigate this specific behavior on your end, as it appears to be an infrastructure-level problem rather than an application-level one? Thank you for your continued patience and support.


14 days ago

I would like to assure you that this is not an issue on our side; under no circumstances do we prevent applications from setting headers in the response. If that were the case, we would be seeing mass reports every minute of CORS issues from our users.

This is an application-level issue or a misconfiguration on your side, and that is what the community is here to help with.


CORS Issue: POST Request Blocked from Vercel Frontend to Railway Backend - Railway Help Station