CORS 問題 Laravel 8 Nginx Ubuntu

Question

我已經搜索了該網站，但找不到有效的解決方案。

我有一個簡單的 Laravel 8 API，它使用 Nginx 托管在 Ubuntu 服務器上。

該應用程序已部署並通過郵遞員工作，但是，當我嘗試使用一個簡單的前端 axios get 對同一 URL 的請求時，我收到以下錯誤：

跨域請求被阻止：同源策略不允許讀取 XXXXXXXXXXXXXXXXXX 處的遠程資源。 （原因：CORS 預檢響應未成功）。

我已經意識到來自前端應用程序的請求甚至沒有通過 index.php。 我試圖注銷一條簡單的消息，但一無所獲。

這讓我相信這個問題與 Nginx 相關。 我的項目站點可用文件如下：

server {
     server_name xxx.xxxxx.xxxxxxxx;
     root /var/www/xxx.xxxxx.xxxxxxxx/public;
 
     index index.html index.htm index.php;
 
     charset utf-8;
 
     location / {
         try_files $uri $uri/ /index.php?$query_string;
     }
 
     location = /favicon.ico { access_log off; log_not_found off; }
     location = /robots.txt  { access_log off; log_not_found off; }
 
     error_page 404 /index.php;
 
     location ~ \.php$ {
         fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
         fastcgi_index index.php;
         fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
         include fastcgi_params;
     }
 
     location ~ /\.(?!well-known).* {
         deny all;
     }
 
     listen 443 ssl; # managed by Certbot
     ssl_certificate /etc/letsencrypt/live/xxx.xxxxx.xxxxxxxx/fullchain.pem; # managed by
      Certbot
     ssl_certificate_key /etc/letsencrypt/live/xxx.xxxxx.xxxxxxxx/privkey.pem; # managed >     by
     Certbot
     include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
     ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
 
 
     } server {
     if ($host = xxx.xxxxx.xxxxxxxx) {
         return 301 https://$host$request_uri;
     } # managed by Certbot
 
 
     listen 80;
     server_name xxx.xxxxx.xxxxxxxx;
     return 404; # managed by Certbot
 
 
     }

如果有人認為我找錯了樹或有任何建議，請告訴我。 我有點難住了！

Answer 1

您是否在標題中添加了“Access-Control-Allow-Origin”。 對於跨域資源共享 (CORS)，您應該在標頭中傳遞它。 您可以創建一個中間件並在您的路由中使用。 這是一個如何做到的示例：

$ php artisan make:middleware Cors

和里面 Cors.php

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')

    }
}

和 Kernel.php 的中間件

protected $routeMiddleware = [
        'auth'          => \Illuminate\Auth\Middleware\Authenticate::class,
        'auth.basic'    => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings'      => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can'           => \Illuminate\Auth\Middleware\Authorize::class,
        'guest'         => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'signed'        => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle'      => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'cors'          => \App\Http\Middleware\Cors::class, // added
    ];

所以你可以使用中間件，如：

Route::middleware(['cors'])->group(function () {
    Route::post('/hogehoge', 'Controller@hogehoge');
});

Answer 2

我發現了問題：這是一些需要特定標頭的中間件。 選項請求不包含此標頭，因此它作為錯誤返回。 然后瀏覽器將其解釋為 CORS 問題。