跨域访问或者下载图片、 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
 --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 人点赞

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

从小程序个人账户申请开始，带你一步步进行开发一个微信小程序，直到提交微信控制台上线发布。

推荐文章：

更多推荐...

博客

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

博客

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

公告

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

分享创造

📙《高并发的哲学原理》开源图书发布十一天 star 数已经破千！ 47 / 16 |

博客

滑块验证图片 19 / 12 |

博客

我是如何把网站图片cdn流量成本压到全网最低(之一)的 39 / 34 |

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;
   }

2年前评论

讨论数量: 6

SanXiao

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

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

2年前评论

magein （楼主）

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

SanXiao （作者）

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

fffswhk

课程读者 197 声望

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

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

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

2年前评论

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;
   }

2年前评论

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

帮助

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

运行环境

跨域请求资源文件

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

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

运行环境

跨域请求资源文件

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录