我有一個用于網站等社交媒體的 Laravel API。API 由前端完全獨立的 React 應用程式使用。API 一切正常。
我有許多存盤在檔案夾中的“公共”目錄中的用戶個人資料影像。下面是目錄結構：
MyAppRoot
├── app
├── ....
├── public
│ └── folder1
| | └── img1.png
| | └── img2.png
│ └── folder2
| └── img1.png
| └── img2.png
└── resources
└── routes
└── ....
當我直接使用https://myapp.com/folder1/img1.png瀏覽器中的 URL 訪問影像時，我可以看到影像，但是當我在 html 檔案中使用與 img 源相同的影像 URL 時，<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/*'],
不幸的是，這些都不起作用。
經過一番搜索，我發現靜態檔案不是由 Laravel 處理的，而是由 Apache 直接提供的。因此，我嘗試.htaccess在應用程式根目錄的檔案中以及應用程式的公共目錄中添加以下行：
<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但我無法使其作業。
我找不到更多問題的解決方案，而且我仍然不確定這里的確切問題是什么。
uj5u.com熱心網友回復：
標頭Cross-Origin-Resource-Policy: same-origin指示您的瀏覽器不要從不同的來源加載資源（例如影像）。
如果您不想（或不能）更改來自服務器的此標頭，您可以將 Apache 服務器設定為反向代理，myapp.com以便瀏覽器從本地請求影像/images/folder1/img1.png，然后 Apache 將此請求轉發到https ://myapp.com/folder1/img1.png。
uj5u.com熱心網友回復：
我終于找到了解決方案。正如Heiko Thei?en在回答中所說，由于回應標頭，資源沒有加載Cross-Origin-Resource-Policy: same-origin。
Cross-Origin-Resource-Policy: cross-origin解決方案是使用來自服務器的標頭進行回應。
.htaccess我在我的目錄中的檔案中添加了以下行/public，一切都很好。我添加了一些模式匹配以避免其他安全問題，并且僅在請求針對某些靜態檔案時才添加標頭。
<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 和不同型別的影像和字體擴展名，以允許各種靜態檔案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/487737.html