Laravel API + React front-end request, Axios returns 404 - Access-Control-Allow-Origin

Question

I'm trying to make a POST request to the Laravel API from React. When I send the request in development mode, the request is successful, but when I deploy the API(:8000) and the frontend(:80) on Apache2, the request is blocked by the strict mode policy and the CORS error indicates that my request is missing access control - Allow-Origin and 404 in response. But Laravel and React pages can be accessed in the browser. To make requests, I use Axios. And the website should have the same base URL http://localhost I tried many solutions but none worked for me.

Laravel 10.x Kernel

I've seen many users suggesting making middleware that adds headers to the server response.Similar content is added by default in Laravel (conf/cors.php); My file looks like this

'paths' => ['http://127.0.0.1:8000','http://localhost','api/*', 'sanctum/csrf-cookie'],
    
    'allowed_methods' => ['*'],
    
    'allowed_origins' => ['*'],
    
    'allowed_origins_patterns' => [],
    
    'allowed_headers' => ['*'],
    
    'exposed_headers' => ['*'],
    
    'max_age' => 0,
    
    'supports_credentials' => false,

It is registered in Kernel.php as follows

protected $middlewareAliases = [
                 // 'cors' => \App\Http\Middleware\Cors::class, <- this is custom middleware not in use now
                'cors' => \Illuminate\Http\Middleware\HandleCors::class,
                'auth' => \App\Http\Middleware\Authenticate::class,
                ...
    
         protected $middleware = [
            // \App\Http\Middleware\Cors::class, <- This is custom
    middleware not in use now
            \Illuminate\Http\Middleware\HandleCors::class,

This is what is in api.php when I use custom middleware

Route::group(['middleware'=>'cors','prefix'=>'api'], function ()
{
    Route::post('/signup',[AuthController::class, 'signup']);
    Route::post('/login',[AuthController::class, 'login']);
    Route::post('/logout',[AuthController::class, 'logout']);
    Route::post('/user/post',[PostController::class,'createPost']);
    Route::get('/user/post',[PostController::class,'getPostsInMonth']);
    
    Route::post('/media/upload',[UploadController::class,'upload']);

});

Even using custom middleware has no success

class Cors
    {
        public function handle(Request $request, Closure $next): Response
        {
            return $next($request)
                ->header('Access-Control-Allow-Origin', '*')
                ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
                ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Origin, X-Requested-With');
        }
    }

Add header in Apache Laravel VirtualHost file

<VirtualHost *:8000>
        ServerName website.com
        ServerAlias ​​*.website.com
        ServerAdmin webmaster@localhost
        DocumentRoot .../laravel/public
        Header add Access-Control-Allow-Origin "*"
        Header add Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"
        <Directory ".../laravel">
            Header set Access-Control-Allow-Origin "*"
            Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"
            Order allow, deny
            Allow from all
            Require all granted
        </Directory>
    </VirtualHost>

React Apache VirtualHost files look very similar to Laravel files

I didn’t succeed:(

.htaccess in Laravel/public

<IfModule mod_headers.c>
        Header set Cross-Origin-Resource-Policy 'cross-origin'
        Header set Access-Control-Allow-Origin "*"
    </IfModule>

Set API address as proxy

In package.json I added this line

"proxy": "http://localhost:8000",

Also tried using the http-proxy-middleware package and setupProxy.js

in the react/src folder

const { createProxyMiddleware } = require('http-proxy-middleware');
    
    module.exports = function(app) {
     app.use(
        '/api/*',
        createProxyMiddleware({
          target: 'http://localhost:8000',
          changeOrigin: true,
        })
     );
    };

axios client script

import axios from "axios";
    
    const axiosClient = axios.create({
        baseURL: "http://127.0.0.1:8000/api",
    })
    
    axiosClient.interceptors.request.use((config)=>{
        const token = localStorage.getItem('ACCESS_TOKEN');
        config.headers = {
            'Authorization': `Bearer ${token}`,
            'Access-Control-Allow-Origin': '*'
        }
        return config;
    })
    
    axiosClient.interceptors.response.use((response)=>{
        return response;
    },(error)=>{
        const {response} = error;
        if(response && response.status == 401){
            localStorage.removeItem('ACCESS_TOKEN');
        }
    
        throw error;
    })
    
    export default axiosClient;

I know many of my settings make my site insecure, but this is for development purposes only. Please help I have been struggling with this for three days><

This is the result I got (sorry stack doesn't want me to upload the image due to formatting issues)

![1]: https://pasteboard.co/feqZ6JrGrvBM.png
![2]: https://pasteboard.co/nluAk8scYXzY.png
![3]: https://pasteboard.co/JF7yiHhH4XtB.png

Answer 1

Finally move the entire project out of the /var/www folder and create symlinks only to the public folders for each site. Also in set the document root path to be the same as the path. After that the Laravel project's default CORS handler starts working normally.