wordpress标签增加彩色背景seo需求

文件服务使用 minio，使用 nginx 反向代理。

将文件存放在 minio 上，如果是公开的文件，则统一放到一个桶，设置为公开只读。

如果是私有文件，则使用临时链接，给有权限的用户查看和打印。

要实现在 html 页面上，弹框显示 pdf 和打印。

遇到问题：

问题 1 跨域安全问题，浏览器不允许加载

由于我的某个主页面上加了安全标签（<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">），导致报错：“Failed to load resource: net::ERR_CONNECTION_RESET”, 请求头出现警告信息："Provisional headers are shown Learn more"

demo 页面就可以正常下载文件，排查了好久才发现是安全标签的问题。

问题 2 显示 pdf 文件

从后端把 minio 中的 pdf 文件链接（使用 minio 的客户端生产的临时链接）返回给前端，但是 浏览一直不显示文件，直接就下载了保存到了本地，使用 embed 标签或者 iframe 都不行。以为是 nginx 问题，不管如何配置，都不行。后来使用 pdf.js 来处理，果然可以显示 pdf 文件。

问题 3 打印 pdf 文件。

打印 pdf ，并没有达到效果，打印的竟然是网页页面，折腾了好久，都不能实现打印 pdf 原文件。

最后决定后端把 pdf 文件下载到 tomcat 的目录，再把这个 tomcat 中的文件链接返回给前端。使用 spring 的 restTemplate 来下载文件（临时链接）,结果遇到 403 ,真奇怪。不管我如何处理，始终报 403。后面参考（设置 user agent）了别人的做法,终于可以下载了。

String u = URLDecoder.decode(addr, StandardCharsets.UTF_8.name());URL url = new URL(u);HttpURLConnection connection = ((HttpURLConnection)url.openConnection());connection.addRequestProperty("User-Agent", "Mozilla/4.0"); // 这里是用来处理 403 错误的。InputStream input = null;try {if (connection.getResponseCode() == 200) {Map<String, List<String>> headerFields = connection.getHeaderFields();headerFields.forEach((key,list)->{if (key != null) {response.setHeader(key, list.get(0));}});input = connection.getInputStream();// 文件流复制/转发StreamUtils.copy(input, response.getOutputStream());} else {input = connection.getErrorStream();}} finally {try {input.close();} catch (Exception e) {}}

后来我一想，直接新开文件下载接口，把 pdf 文件下载文件流直接转发给前端 iframe ，看看如何。 结果成功显示并且还可以打印。此时我并没设置 Content-Type 返回头 header。让我顿然开朗，马上检查在 minio 中的文件的 content type 为 application/octet-stream ，不是 pdf 类型。原来文件上传到 minio 时没有处理好文件类型。导致下载文件时，浏览器直接把文件下载。处理好后，重新上传 pdf 文件，文件类型为 application/pdf。在文件下载文件流转发给前端时，把下载时返回 header 也全部转发给前端，达到想要的效果。

然后我再重新把 pdf 文件的 minio 的临时链接给 iframe 的 src,成功达到效果。

总结：要注意跨域问题，即使在本地开发，localhost 和 本机 Ip 两个方式也会存在跨域问题。

文件流可以直接转发。文件类型要正确，否则浏览器不会打开显示文件，会直接下载。