<p>Saya cuba membuat permintaan POST kepada API Laravel daripada React. Apabila saya menghantar permintaan dalam mod pembangunan, permintaan itu berjaya, tetapi apabila saya menggunakan API(:8000) dan frontend(:80) pada Apache2, permintaan itu disekat oleh dasar mod ketat dan ralat CORS menunjukkan bahawa saya permintaan tiada kawalan akses - Allow-Origin dan 404 sebagai tindak balas. Tetapi halaman Laravel dan React boleh diakses dalam penyemak imbas. Untuk membuat permintaan, saya menggunakan Axios. Dan tapak web harus mempunyai URL asas yang sama <kod>http://localhost</code> Saya mencuba banyak penyelesaian tetapi tidak ada yang berkesan untuk saya. </p> <h1>Laravel 10.x Kernel</h1> <p>Saya telah melihat ramai pengguna mencadangkan membuat middleware yang menambah pengepala pada respons pelayan.Kandungan serupa ditambah secara lalai dalam Laravel (<code>conf/cors.php</code>); Fail saya kelihatan seperti ini</p> <pre class="brush:php;toolbar:false;">'paths' => 'sanctum/csrf-cookie'], 'allowed_methods' => ['*'], 'allowed_origins' => ['*'], 'allowed_origins_patterns' => [], 'allowed_headers' => ['*'], 'exposed_headers' => ['*'], 'umur_maks' => 'supports_credentials' => <p>Ia didaftarkan dalam <code>Kernel.php</code> <pre class="brush:php;toolbar:false;">protected $middlewareAliases = [ // 'cors' => AppHttpMiddlewareCors::class, <- ini perisian tengah tersuai yang tidak digunakan sekarang 'cors' => IlluminateHttpMiddlewareHandleCors::class, 'auth' => AppHttpMiddlewareAuthenticate::class, ... $perisian tengah yang dilindungi = [ // AppHttpMiddlewareCors::class, <- Ini adalah adat middleware tidak digunakan sekarang IlluminateHttpMiddlewareHandleCors::class,</pre> <p>Inilah yang terkandung dalam <code>api.php</code> <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>Malah menggunakan perisian tengah tersuai gagal</p> <pre class="brush:php;toolbar:false;">class Cors { pemegang fungsi awam(Permintaan $permintaan, Penutupan $seterusnya): Respons { pulangkan $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'); } }</pra> <h1>在 Apache Laravel VirtualHost 文件中添加标头</h1> <pre class="brush:php;toolbar:false;"><VirtualHost *:8000> laman web ServerName.com ServerAlias ​​*.website.com ServerAdmin webmaster@localhost DocumentRoot .../laravel/public Tajuk tambah Access-Control-Allow-Origin "*" Pengepala tambah Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization" <Direktori ".../laravel"> Pengepala set Access-Control-Allow-Origin "*" Pengepala set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization" Perintah benarkan, tolak Izinkan dari semua Memerlukan semua diberikan </Direktori> </VirtualHost></pra> <p>React Apache VirtualHost 文件看起来与 Laravel 文件非常相似</p> <p>我没有成功:(</p> <h1>Laravel/public 中的 .htaccess</h1> <pre class="brush:php;toolbar:false;"><IfModule mod_headers.c> Pengepala set Cross-Origin-Resource-Policy 'cross-origin' Pengepala 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>还尝试使用<kod>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({ sasaran: 'http://localhost:8000', changeOrigin: benar, }) ); };</pre> <h1>axios 客户端脚本</h1> <pre class="brush:php;toolbar:false;">import axios daripada "axios"; const axiosClient = axios.create({ baseURL: "http://127.0.0.1:8000/api", }) axiosClient.interceptors.request.use((config)=>{ token const = localStorage.getItem('ACCESS_TOKEN'); config.headers = { 'Kebenaran': `Pembawa ${token}`, 'Access-Control-Allow-Origin': '*' } kembalikan konfigurasi; }) axiosClient.interceptors.response.use((response)=>{ balasan balas; },(ralat)=>{ const {respon} = ralat; if(respon && response.status == 401){ localStorage.removeItem('ACCESS_TOKEN'); } ralat lontaran; }) eksport lalai axiosClient;</pre> <p>Saya tahu banyak tetapan saya menjadikan tapak saya tidak selamat, tetapi ini adalah untuk tujuan pembangunan sahaja. Tolong bantu saya telah bergelut dengan perkara ini selama tiga hari><</p> <p>Ini adalah hasil yang saya dapat (maaf timbunan tidak mahu saya memuat naik imej kerana masalah pemformatan)</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>