调用图像时laravel中直接路径中的Cors Origin

Posted 2023-03-04

【中文标题】调用图像时laravel中直接路径中的Cors Origin

【英文标题】：Cors Origin in Direct Path in laravel when calling images

【发布时间】：2017-08-19 01:28:11

【问题描述】：

现在我使用 laravel 5.2 作为 webserivce 和 angular2 作为首页来构建 web 应用程序 我使用来自http://cdn.pannellum.org 的 VR 库 当我从我的数据库（如 mywebsite.com/public/Images/photo7.png）中调用 Iamge 链接时，我的问题 将这条消息返回给我

“Access-Control-Allow-Origin”标头出现在请求的 资源。因此不允许使用原点“http://localhost:5565” 访问。

但我在开始项目以从 laravel 和 angular 传输数据之前处理了这个问题，但是当我从直接路径调用我的图像时返回给我这个消息

【问题讨论】：

有人可以回答这个问题吗？我也有同样的问题。

把这个放在公共文件夹中的.htaccess Header set Access-Control-Allow-Origin "*"

@KamgaSimoJunior 我在下面回答了

【参考方案1】：

Laravel 5 (L5)：在我的项目中，当我返回图像（文件）并希望避免使用 CORS 时，我使用以下代码（我在没有测试的情况下手动更改了一点，但它应该工作）：

private function responseFile($filePath, $fileMimeType,  $originalFileName) 

    $headers = array(
        'Content-Type' => $fileMimeType,
        //'Content-Disposition' => 'attachment; filename="'. $attachment->org_name . '"', - this header is added automaticaly
        "Access-Control-Allow-Origin" => request()->getSchemeAndHttpHost() // allow CORS (e.g. for images)
    );

    return response()->download($filePath, $originalFileName, $headers);

在此解决方案中，您根本不需要触摸 apache .htaccess 文件（或 nginx 配置文件）（如果这样做会导致标题重复错误） - 因为在这种情况下我们使用所谓的Simple CORS request。

您还可以阅读 this answer 以避免其他可能导致 CORS 错误的问题。

【参考方案2】：

试试这些方法：

从enter link description here 安装和配置 Cors 添加 Cors 模式

fetch(url,mode:"cors")
                    .then(res => res.blob())
                    .then(blob => 
                        const file = new File([blob], 'dot.png', type:'image/png');
                        console.log(file);
                    );

来自enter link description here 的资源