Laravel API + Front-End-Anfrage reagieren, Axios gibt 404 – Access-Control-Allow-Origin zurück

Question

Ich versuche, von React aus eine POST-Anfrage an die Laravel-API zu stellen. Wenn ich die Anfrage im Entwicklungsmodus sende, ist die Anfrage erfolgreich, aber wenn ich die API (:8000) und das Frontend (:80) auf Apache2 bereitstelle, wird die Anfrage durch die Richtlinie für den strikten Modus blockiert und der CORS-Fehler zeigt an, dass meine Bei der Anfrage fehlt die Zugriffskontrolle – Allow-Origin und 404 als Antwort. Aber Laravel- und React-Seiten können im Browser aufgerufen werden. Um Anfragen zu stellen, verwende ich Axios. Und die Website sollte dieselbe Basis-URL http://localhost haben. Ich habe viele Lösungen ausprobiert, aber keine hat für mich funktioniert.

Laravel 10.x Kernel

Ich habe viele Benutzer gesehen, die vorgeschlagen haben, Middleware zu entwickeln, die der Serverantwort Header hinzufügt.Ähnliche Inhalte werden standardmäßig in Laravel hinzugefügt (conf/cors.php); Meine Datei sieht so aus

'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,

Es wird in Kernel.php wie folgt registriert

protected $middlewareAliases = [
                 // 'cors' => AppHttpMiddlewareCors::class, <- Dies ist benutzerdefinierte Middleware, die derzeit nicht verwendet wird
                'cors' => IlluminateHttpMiddlewareHandleCors::class,
                'auth' => AppHttpMiddlewareAuthenticate::class,
                ...
    
         protected $middleware = [
            // AppHttpMiddlewareCors::class, <- Dies ist benutzerdefiniert
    Middleware wird derzeit nicht verwendet
            IlluminateHttpMiddlewareHandleCors::class,

Das ist, was in api.php steht, wenn ich benutzerdefinierte Middleware verwende

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']);

});

Selbst die Verwendung benutzerdefinierter Middleware hat keinen Erfolg

class Cors
    {
        öffentliches Funktionshandle(Request $request, Closure $next): Antwort
        {
            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');
        }
    }

在 Apache Laravel VirtualHost 文件中添加标头

<VirtualHost *:8000>
        Servername website.com
        ServerAlias ​​*.website.com
        ServerAdmin webmaster@localhost
        DocumentRoot .../laravel/public
        Header hinzufügen Access-Control-Allow-Origin "*"
        Header Access-Control-Allow-Header „Origin, X-Requested-With, Content-Type, Accept, Authorization“ hinzufügen
        <Verzeichnis ".../laravel">
            Header-Set Access-Control-Allow-Origin "*"
            Header-Set Access-Control-Allow-Header „Origin, X-Requested-With, Content-Type, Accept, Authorization“
            Befehl erlauben, verweigern
            Von allen zulassen
            Fordern Sie alles gewährt
        </Verzeichnis>
    </VirtualHost>

React Apache VirtualHost 文件看起来与 Laravel 文件非常相似

我没有成功:(

Laravel/public 中的 .htaccess

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

设置API地址作为代理

在package.json中我添加了这一行

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

还尝试使用http-proxy-middleware包 和react/src文件夹中的setupProxy.js

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

axios 客户端脚本

axios aus "axios" importieren;
    
    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 = {
            'Autorisierung': `Bearer ${token}`,
            'Access-Control-Allow-Origin': '*'
        }
        Konfiguration zurückgeben;
    })
    
    axiosClient.interceptors.response.use((response)=>{
        Rückantwort;
    },(error)=>{
        const {response} = Fehler;
        if(response && Response.status == 401){
            localStorage.removeItem('ACCESS_TOKEN');
        }
    
        Wurffehler;
    })
    
    Export Standard axiosClient;

Ich weiß, dass viele meiner Einstellungen meine Website unsicher machen, aber dies dient nur Entwicklungszwecken. Bitte helfen Sie mir, ich kämpfe seit drei Tagen damit><

Dies ist das Ergebnis, das ich erhalten habe (der Stack möchte leider nicht, dass ich das Bild aufgrund von Formatierungsproblemen hochlade)

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

Answer 1

最终将整个项目从 /var/www 文件夹中移出，并仅为每个站点的公共文件夹创建符号链接。同样在 设置文档根路径与 路径相同。之后 Laravel 项目的默认 CORS 处理程序开始正常工作。