API Laravel + React permintaan bahagian hadapan, Axios mengembalikan 404 - Access-Control-Allow-Origin

Question

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 http://localhost Saya mencuba banyak penyelesaian tetapi tidak ada yang berkesan untuk saya.

Laravel 10.x Kernel

Saya telah melihat ramai pengguna mencadangkan membuat middleware yang menambah pengepala pada respons pelayan.Kandungan serupa ditambah secara lalai dalam Laravel (conf/cors.php); Fail saya kelihatan seperti ini

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

Inilah yang terkandung dalam api.php

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

});

Malah menggunakan perisian tengah tersuai gagal

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>

设置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({
          sasaran: 'http://localhost:8000',
          changeOrigin: benar,
        })
     );
    };

axios 客户端脚本

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;

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

Ini adalah hasil yang saya dapat (maaf timbunan tidak mahu saya memuat naik imej kerana masalah pemformatan)

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

Answer 1

Akhirnya mengalihkan keseluruhan projek keluar dari folder /var/www dan mencipta pautan sym hanya untuk folder awam setiap tapak. Juga dalam 设置文档根路径与 jalan yang sama. Selepas itu pengendali CORS lalai projek Laravel mula berfungsi seperti biasa.