跨域访问或者下载图片、 word、 ppt文档

运行环境#

Nginx 1.8.0
Laravel Framework 8.61.0
PHP 7.4.14 (cli)

跨域请求资源文件#

前后端分离的项目，跨域请求使用了官方的 \Fruitcake\Cors\HandleCors 中间件，config/cors.php 已经配置，api 接口请求正常

项目的 nginx 配置

location / {
    index index.php;
    try_files $uri $uri/ /index.php?$query_string;
}

在 public 目录下有两个目录提供访问的

 public
 --bgs
 ----bg1.png
 ----bg2.png
 --docs
 ----doc1.docx
 ----doc2.docx

现在面临两个问题，业务场景：

前端合成图片需要的背景图，需要从服务器中下载

// 前端代码
uni.downloadFile({
 url:'http://test.com/bg/bg1.png'
})

下载的时候出现跨域的问题

 Access to XMLHttpRequest at 'http://test.com/bg/bg1.png' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

我尝试了两种有效的方式
1.1 修改 nginx 的配置文件

location ~ .*\.(gif|jpg|jpeg|bpm|png)$ {
    expires 30d;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    add_header Content-Disposition *;
    error_log off;
    access_log /dev/null;
}

1.2 添加路由，请求的 url 使用 test.com/download?name=bg/bg1.png

Route::get('/download', function (Request $request) {
    return Response::download($request::input('name'));
});

使用 <img src=”http://test.com/bg/bg1.png"/> 前端正常显示
我的疑问是当直接下载 test.com/bg/bg1.png 下载时候是 laravel 响应造成的还是 nginx 配置中 try_files 影响了呢？

在线预览 doc、ppt 等 ofice 文件
使用的是微软提供的在线预览功能
https://view.officeapps.live.com/op/view.aspx?src = 公网可访问的文件地址

这里我要访问 public/docs/doc1.docx 的文件，提交到服务器的时候，加载总是出现错误
但是直接访问就下载文件，能下载为什么不能预览？

外网地址 resume.magein.cn:7002/docs/doc1.do...
拼接后的预览地址 view.officeapps.live.com/op/view.a...

配置文件中的 try_files 在请求中对结果有什么决定性的影响吗？

magein

14 声望

喜欢听相声的phper

1 人点赞

你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程，JWT 概念及使用和 API 开发相关的进阶知识。

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

推荐文章：

更多推荐...

试用 Laravel + 树莓派搭建视频监控，并支持线上访问 25 / 19 |

置顶

[进度 100.00%] Laravel 11 开始翻译/校对文档 25 / 44 |

博客

Laravel 11 中文文档仓库，已翻译完成！！！ 18 / 29 |

博客

高效办公小技巧——如何批量处理 SQL 文件？ 19 / 11 |

博客

别让这样的定时任务拖垮你的网站 24 / 30 |

公告

Laravel 10 开始翻译/校对文档 32 / 33 |

magein

14 声望

最佳答案

访问静态资源，如图片使用 nginx 的配置

location ~ .*\.(gif|jpg|jpeg|bpm|png)$ {
        expires 30d;
        # 添加响应头，允许跨域的响应头 请特别注意*号的使用，最好是指定自己的服务器域名跨域（前后端分离的情况下）
        add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
       add_header Content-Disposition *;
       error_log off;
       access_log /dev/null;
}

原因是 nginx 的配置文件 try_files 的作用，try_files 会判断 $uri 是不是一个文件是的话直接返回，这个时候没有进入到 laravel 的路由里面，所以不存在 laravel 相关的任何问题，

 location / {
       index index.php;
       # 判断$uri是不是一个文件   不是的话判断 $uri/ 是不是一个目录 不是的话执行第三个即进入到public/index.php经由laravel路由文件
       try_files $uri $uri/ /index.php?$query_string;
   }

3年前评论

讨论数量: 6

SanXiao

Laravel 9.x 译者 57 声望 / 技术小组长 @ 某司

1、安全起见，资源文件建议放在项目 storage 文件夹中或者云存储中。 2、跨域请求我习惯在服务端设置比如中间件 CorsMiddleware gitee.com/private.com/laravel-api/...

3年前评论

magein （楼主）

我用了官方的cors api请求没问题，下载public目录下的图片出现跨域问题，我想确定这个时候有没有走laravel的路由机制吧。按照nginx的location{try_files $uri }配置，应该是没有走laravel的路由吧

SanXiao （作者）

@magein 是的没有走路由，你在服务端关掉防跨站（open_basedir）试试

fffswhk

课程读者 206 声望

img 和 script 标签引用的资源是没有跨域限制的，所以才会有 jsonp 这种解决方案。关于你的问题，可以尝试在

Route::get('/download', function (Request $request) {
    return Response::download($request::input('name'));
});

这段代码里加入指定的响应头（跨域那些字段），来排查和定位问题。跨域的时候针对非简单请求，会进行预检（OPTIONS）请求。chrome 控制台的默认不显示预检请求，可以百度如何打开。关于跨域的问题，建议仔细阅读 mdn 上的文档跨源资源共享（CORS）

3年前评论

magein （楼主）

嗯嗯。谢谢您的回答

magein

14 声望

访问静态资源，如图片使用 nginx 的配置

location ~ .*\.(gif|jpg|jpeg|bpm|png)$ {
        expires 30d;
        # 添加响应头，允许跨域的响应头 请特别注意*号的使用，最好是指定自己的服务器域名跨域（前后端分离的情况下）
        add_header Access-Control-Allow-Origin *;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
       add_header Content-Disposition *;
       error_log off;
       access_log /dev/null;
}

原因是 nginx 的配置文件 try_files 的作用，try_files 会判断 $uri 是不是一个文件是的话直接返回，这个时候没有进入到 laravel 的路由里面，所以不存在 laravel 相关的任何问题，

 location / {
       index index.php;
       # 判断$uri是不是一个文件   不是的话判断 $uri/ 是不是一个目录 不是的话执行第三个即进入到public/index.php经由laravel路由文件
       try_files $uri $uri/ /index.php?$query_string;
   }

3年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

跨域访问或者下载图片、 word、 ppt文档

运行环境#

跨域请求资源文件#

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

跨域访问或者下载图片、 word、 ppt文档

运行环境#

跨域请求资源文件#

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录