CORS preflight request error: Redirect is not allowed for a preflight request
Stefan Izdrail
Founder & Senior Architect · 2026-06-29
Title: CORS Preflight Request Error: Resolving "Redirect is not allowed for a preflight request" Issues in Vue3 Applications
Body:
I have a Vue3 application with an Access-Control-Allow-Origin header set up according to the documentation of the package. Most common GET requests send these headers, but when it comes to POST requests, the situation is different. The issue arises specifically when the API receives POST requests from the frontend while some other methods work just fine with the Access-Control-Allow-Origin header included in their response. In this case, an error occurs: "Access to XMLHttpRequest at 'https://tatrytec.eu/api/article/store/' from origin 'https://vue.tatrytec.eu' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request."
To address the issue, you must understand how the Cross-Origin Resource Sharing (CORS) mechanism works and how it can be configured in your Vue3 application. CORS is a mechanism that uses additional HTTP headers to allow a web browser to access an API's resources from another domain. This configuration allows cross-origin requests to pass through, but sometimes you might encounter issues like the one mentioned above.
In your case, the issue seems to stem primarily from your frontend application trying to redirect the user during a preflight request. In some cases, this may not be allowed by the API server because it prevents the CORS headers from being set up properly for all requests. As a result, you must ensure that any redirects within your Vue3 application do not occur during the preflight request stage to avoid triggering this error.
To further investigate and troubleshoot this issue, you should closely examine your code within `App/Http/Controllers/Api/ArticlesController.php` where a specific method is causing problems. By analyzing your server‑side code, you will be able to determine if there are any redirects or other unexpected behaviors that might cause the CORS error.
Another potential solution could involve adjusting your `config/cors.php` and `Kernel.php` files as per your application's needs. Configuring these files correctly can help establish a more controlled CORS policy, ensuring only specific origins, methods, headers, exposed headers or credentials have access to the API, avoiding any unintended redirect issues during preflight requests.
In conclusion, by understanding how CORS works and analyzing your application's code and configuration files, you can set up the required header and prevent the "redirect is not allowed for a preflight request" issue in your Vue3 application. A well-configured CORS policy will ensure seamless communication between different origins while maintaining the security of your API and keeping your data safe from unauthorized requests.