Laravel API + React front-end request, Axios returns 404 - Access-Control-Allow-Origin
P粉492959599
P粉492959599 2023-09-02 12:50:08
0
1
527

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

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

P粉492959599
P粉492959599

reply all (1)
P粉226413256

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.

    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!