Laravel 与 Apache 的跨源资源共享

Question

我有一个 Laravel API 用于像网站这样的社交媒体。 API 由前端完全独立的 React 应用程序使用。 API.

一切正常

我有许多用户的个人资料图片存储在 'public' 文件夹中组织的目录中。下面是目录结构：

MyAppRoot
├── app
├── ....
├── public
│   └── folder1
|   |   └── img1.png
|   |   └── img2.png
│   └── folder2
|       └── img1.png
|       └── img2.png
└── resources
└── routes
└── ....

当我在浏览器中直接使用URL https://myapp.com/folder1/img1.png访问图片时，我可以看到图片但是当我在html中使用相同的图片URL ] file as img source <img src="https://myapp.com/folder1/img1.png"/> 我在浏览器控制台中收到以下错误。

GET https://myapp.com/folder1/img1.png net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200

我可以在直接访问时毫无问题地访问所有目录中的所有图像，但如果我尝试将任何图像嵌入 html 文件中，则会出现相同的错误。

我搜索了一下，发现这是由于 CORS 策略，我尝试将文件夹添加到 conf/cors.php 路径中，如下所示：

'paths' => ['api/*', 'sanctum/csrf-cookie', 'broadcasting/auth', 'public/*'],

AND

'paths' => ['api/*', 'sanctum/csrf-cookie', 'broadcasting/auth', 'public/**/*'],

AND

'paths' => ['api/*', 'sanctum/csrf-cookie', 'broadcasting/auth', 'forlder1/*'],

不幸的是，其中 none 个有效。

再搜索了一下，我发现在某个地方，静态文件不是由 Laravel 处理的，而是直接由 Apache 提供的。因此，我尝试在应用程序根目录的 .htaccess 文件中以及应用程序的 public 目录中添加以下行：

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp|pdf)$">
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

但同样，这些也不起作用。

我也尝试在 Apache 配置文件 httpd.conf 中添加此代码，但我无法使其工作。

我找不到问题的更多解决方案，而且，我仍然不确定这里的确切问题是什么。

Answer 1

header Cross-Origin-Resource-Policy: same-origin 指示您的浏览器不要加载来自不同来源的资源（例如图像）。

如果您不想（或不能）更改来自您的服务器的 header，您可以将 Apache 服务器设置为 reverse proxy to myapp.com so that the browser requests the image locally, from /images/folder1/img1.png, and Apache forwards this request to https://myapp.com/folder1/img1.png。

Answer 2

我终于找到了解决办法。如 Heiko Theißen in the answer 所述，由于响应 header Cross-Origin-Resource-Policy: same-origin.

，资源未加载

解决方案是从服务器响应 header Cross-Origin-Resource-Policy: cross-origin。

我在我的 /public 目录中的 .htaccess 文件中添加了以下行，并且一切正常。我添加了一些模式匹配以避免其他安全问题，并且仅当请求是针对某些静态文件时才添加 header。

<IfModule mod_headers.c>
    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp|pdf|eot|otf|tt[cf]|woff2?)$">
        Header set Cross-Origin-Resource-Policy 'cross-origin'
    </FilesMatch>
</IfModule>

我在匹配模式中添加了 pdf 和不同类型的图像和字体扩展名，以允许各种静态文件。

Laravel 与 Apache 的跨源资源共享

Cross-Origin Resource Sharing in Laravel with Apache

php

laravel

apache

cors