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

 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"  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  

React Apache VirtualHost files look very similar to Laravel files

I didn’t succeed:(

.htaccess in Laravel/public

 Header set Cross-Origin-Resource-Policy 'cross-origin' Header set Access-Control-Allow-Origin "*" 

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

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