<p>J'essaie de faire une requête POST à ​​l'API Laravel depuis React. Lorsque j'envoie la requête en mode développement, la requête aboutit, mais lorsque je déploie l'API(:8000) et le frontend(:80) sur Apache2, la requête est bloquée par la politique du mode strict et l'erreur CORS indique que mon la demande ne dispose pas d'un contrôle d'accès - Allow-Origin et 404 en réponse. Mais les pages Laravel et React sont accessibles dans le navigateur. Pour faire des requêtes, j'utilise Axios. Et le site Web doit avoir la même URL de base <code>http://localhost</code> J'ai essayé de nombreuses solutions mais aucune n'a fonctionné pour moi. </p> <h1>Noyau Laravel 10.x</h1> <p>J'ai vu de nombreux utilisateurs suggérer de créer un middleware qui ajoute des en-têtes à la réponse du serveur.Un contenu similaire est ajouté par défaut dans Laravel (<code>conf/cors.php</code>); Mon fichier ressemble à ceci</p> <pre class="brush:php;toolbar:false;">'paths' => 'sanctum/csrf-cookie'], 'allowed_methods' => ['*'], 'allowed_origins' => ['*'], 'allowed_origins_patterns' => [], 'allowed_headers' => ['*'], 'exposed_headers' => ['*'], 'max_age' => 'supports_credentials' => false,</pre> <p>Il est enregistré dans <code>Kernel.php</code> comme suit</p> <pre class="brush:php;toolbar:false;">protected $middlewareAliases = [ // 'cors' => AppHttpMiddlewareCors::class, <- il s'agit d'un middleware personnalisé qui n'est pas utilisé actuellement 'cors' => 'auth' => AppHttpMiddlewareAuthenticate::class, ... middleware $ protégé = [ // AppHttpMiddlewareCors::class, <- Ceci est personnalisé le middleware n'est pas utilisé actuellement IlluminateHttpMiddlewareHandleCors::class,</pre> <p>Voici ce qui se trouve dans <code>api.php</code> lorsque j'utilise un middleware personnalisé</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']); });</pré> <p>Même l'utilisation d'un middleware personnalisé a échoué</p> <pre class="brush:php;toolbar:false;">class Cors { handle de fonction publique (Request $request, Closure $next) : Réponse { retourner $suivant($requête) ->en-tête('Access-Control-Allow-Origin', '*') ->en-tête('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS') ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Origin, X-Requested-With'); } }≪/pré> <h1>在 Apache Laravel VirtualHost 文件中添加标头</h1> <pre class="brush:php;toolbar:false;"><VirtualHost *:8000> Nom du serveur site web.com Alias ​​du serveur *.website.com Administrateur du serveur webmaster@localhost DocumentRoot .../laravel/public En-tête ajouter Access-Control-Allow-Origin "*" En-tête ajouter les en-têtes Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization" <Répertoire ".../laravel"> En-tête défini Access-Control-Allow-Origin "*" Ensemble d'en-têtes Access-Control-Allow-Headers "Origine, X-Requested-With, Content-Type, Accept, Authorization" Commande autoriser, refuser Autoriser tous Exiger que tout soit accordé </Répertoire> </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> Ensemble d'en-tête Cross-Origin-Resource-Policy 'cross-origin' En-tête défini 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>包 <code>setupProxy.js</code></p> <pre class="brush:php;toolbar:false;">const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = fonction (application) { app.use( '/api/*', createProxyMiddleware({ cible : 'http://localhost:8000', changeOrigin: vrai, }) ); };</pré> <h1>axios 客户端脚本</h1> <pre class="brush:php;toolbar:false;">importer des axios depuis "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 = { 'Autorisation' : `Bearer ${token}`, 'Contrôle d'accès-Autoriser-Origin' : '*' } retourner la configuration ; }) axiosClient.interceptors.response.use((response)=>{ réponse de retour ; },(erreur)=>{ const {réponse} = erreur ; if(réponse && réponse.status == 401){ localStorage.removeItem('ACCESS_TOKEN'); } erreur de lancement ; }) exporter axiosClient par défaut;</pre> <p>Je sais que bon nombre de mes paramètres rendent mon site non sécurisé, mais ceci est uniquement destiné à des fins de développement. S'il vous plaît, aidez-moi, j'ai du mal avec ça depuis trois jours><</p> <p>Voici le résultat que j'ai obtenu (désolé, Stack ne veut pas que je télécharge l'image en raison de problèmes de formatage)</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>