<p>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 <code>http://localhost</code> haben. Ich habe viele Lösungen ausprobiert, aber keine hat für mich funktioniert. </p> <h1>Laravel 10.x Kernel</h1> <p>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 (<code>conf/cors.php</code>); Meine Datei sieht so aus</p> <pre class="brush:php;toolbar:false;">'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,</pre> <p>Es wird in <code>Kernel.php</code> wie folgt registriert</p> <pre class="brush:php;toolbar:false;">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,</pre> <p>Das ist, was in <code>api.php</code> steht, wenn ich benutzerdefinierte Middleware verwende</p> <pre class="brush:php;toolbar:false;">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']); });</pre> <p>Selbst die Verwendung benutzerdefinierter Middleware hat keinen Erfolg</p> <pre class="brush:php;toolbar:false;">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'); } }</pre> <h1>在 Apache Laravel VirtualHost 文件中添加标头</h1> <pre class="brush:php;toolbar:false;"><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></pre> <p>React Apache VirtualHost 文件看起来与 Laravel 文件非常相似</p> <p>我没有成功:(</p> <h1>Laravel/public 中的 .htaccess</h1> <pre class="brush:php;toolbar:false;"><IfModule mod_headers.c> Header-Set Cross-Origin-Resource-Policy 'cross-origin' Header-Set Access-Control-Allow-Origin "*" </IfModule></pre> <h1>设置API地址作为代理</h1> <p>在<code>package.json</code>中我添加了这一行</p> <pre class="brush:php;toolbar:false;">"proxy": "http://localhost:8000",</pre> <p>还尝试使用<code>http-proxy-middleware</code>包 和react/src文件夹中的<code>setupProxy.js</code></p> <pre class="brush:php;toolbar:false;">const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api/*', createProxyMiddleware({ Ziel: 'http://localhost:8000', changeOrigin: wahr, }) ); };</pre> <h1>axios 客户端脚本</h1> <pre class="brush:php;toolbar:false;">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;</pre> <p>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><</p> <p>Dies ist das Ergebnis, das ich erhalten habe (der Stack möchte leider nicht, dass ich das Bild aufgrund von Formatierungsproblemen hochlade)</p> <pre class="brush:php;toolbar:false;">![1]: https://pasteboard.co/feqZ6JrGrvBM.png ![2]: https://pasteboard.co/nluAk8scYXzY.png ![3]: https://pasteboard.co/JF7yiHhH4XtB.png</pre></p>