React Axios 的 Laravel 8 CORS 问题答案

【问题标题】：Laravel 8 CORS issue with React AxiosReact Axios 的 Laravel 8 CORS 问题
【发布时间】：2021-05-30 03:23:29
【问题描述】：

我的 API（使用 Laravel 8 框架构建）托管在一个子域 - webapi.somedomain.com 中。我正在运行使用 React 框架和 Axios 库为 HTTP 请求构建的本地版本的前端 UI。我在共享主机空间（cPanel + CentOS）中托管我在访问托管 API 时遇到了问题。我已经说明了我在下面看到的错误：

Access to XMLHttpRequest at 'http://webapi.somedomain.com/api/authorization/signup' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

所以我添加了 Laravel 自定义 CORS 中间件；使用php artisan config:cache 更新了文件并清除了缓存。没有成功。找不到其他资源。所以我添加了 Laravel CORS 包 - fruitcake/laravel-cors。已安装、发布并添加到中间件；更新文件并清除缓存。但是当我从我的 React 项目中访问 API 时，我仍然看到了 CORS 错误

配置/cors.php：

    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,

内核.php：

    protected $middleware = [
        ...
        \Fruitcake\Cors\HandleCors::class,
    ];

我只是 Laravel 的初学者。我究竟做错了什么？有人可以帮我吗？提前致谢。

P.S.：我完全理解 CORS 是什么以及它是如何工作的。我是 Laravel 的新手。对开发并不陌生。我想知道我还应该做什么，以及我是否遗漏了什么。

【问题讨论】：

@AjeetShah 我知道 CORS 是什么。当托管在本地开发 XAMPP 服务器和 localhost:3000 中的 UI 中时，API 工作得非常好。当作为子域移动到服务器时，当它从 localhost:3000 被命中时它会失败。我不确定为什么会这样。这就是我添加问题的原因。
是的，没错。这就是为什么添加票并关闭它的原因：'D
你可以检查添加标题（“Access-Control-Allow-Origin：*”）；到 index.php（在公共文件夹中）？仅用于测试。完全打开cors不是个好主意
@Viduranga 我试过了。相同的。 CORS 错误。
谢谢。我的问题现在已经解决了。这是因为目录中的 .htaccess 文件。它一直拒绝我来自所有域的请求。手动重新配置，问题就解决了。

标签： reactjs laravel cors laravel-8 laravel-api

【解决方案1】：

问题在于 .htaccess 文件。

在共享托管服务器中，只有项目的公共文件夹可以在 public_html 文件夹中访问，其余部分隐藏在私有文件夹中，这一点很重要。

将您的 index.php 链接到私有的 autoload.php（公共不可访问的地方 - 根文件夹或 public_html 之外的任何文件夹）

将 Laravel 项目添加到共享托管工作区时，向位于托管工作区的 public_html 文件夹内的 public 文件夹中的 .htaccess 文件添加一些规则很重要。

最后，.htaccess 文件应该如下所示：

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
       Options -MultiViews
   </IfModule>
   Options +FollowSymlinks
   RewriteEngine On

   # Redirect Trailing Slashes...
   RewriteRule ^(.*)/$ /$1 [L,R=301]

   # Handle Front Controller...
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^ index.php [L]
</IfModule>

RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]

只有在此之后，您才能运行对 Laravel 路由的查询。如果不仅index.php 将被执行，其他路由将不会被识别。

这可能是已知的。但由于我是初学者，我无法弄清楚这一点。添加这个作为答案，以防任何其他初学者面临同样的问题。干杯。

【讨论】：

【解决方案2】：

如果您使用 apache2 为您的 laravel 应用程序提供服务，那么服务于您的应用程序的域/子域的 conf 文件可能存在问题

要允许使用 .htaccess，您需要在块结束标记之后将块添加到您的 conf 文件中。类似于以下内容：

// File: /etc/apache2/sites-available/example.com.conf
// File: /etc/apache2/sites-available/example.com-le-ssl.conf

....
</VirtualHost>
<Directory /var/www/html/example.com/public_html>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

确保修改您的项目路径并确保在您的两个 conf 文件中都包含此块，以防您的项目使用 SSL [https]

现在将应用 .htaccess 文件中的任何配置

【讨论】：