flarum通过反代使用Imgur上传图片、视频

本文教你如何在无法访问Imgur时通过反代以实现在flarum论坛上使用imgur上传图片功能

前言：准备ID

启用扩展后，系统会提示您设置 Imgur 客户端 ID。您可以在这里用您的 Imgur 账号获取一个。请务必在表格中选择 「Anonymous usage without user authorization」。另外需要注意的是，界面上显然有一个BUG，所以你可能需要选择第二个选项，然后再选择第三个选项，否则会被要求填写「授权回调URL」。如果你在创建开发应用时遇到问题，请在国际社区回复，原作者帮助你。 ——来自https://discuss.flarum.org.cn/d/1786

nginx搭建反代

具体的内容可以参考搜索引擎和这篇文章中的nginx部分。这里简单说一下要点:

• 建议反代地址和论坛使用同一域名。如果你的论坛是https://论坛.域名.com的话最好把反代地址设置为类似https://论坛.域名.com/imgur的形式。
• 多在生产环境做测试，以免出现问题
• 注意是否多加/漏写了斜杠

下面分享一下我的配置：

location ^~ /imgur/ {
                        proxy_pass https://i.imgur.com/;
                        proxy_buffering off;
                        proxy_set_header Referer "";
                        proxy_set_header User-Agent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36";
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                        proxy_set_header Upgrade "websocket";
                        proxy_set_header Connection "Upgrade";
                        # 取消下面的注释可以启用 Nginx 缓存
                        #proxy_cache            STATIC;
                        #proxy_cache_key $uri;  
                        #proxy_cache_valid      200  30d;
                        #proxy_cache_use_stale  error timeout invalid_header updating
                        #                       http_500 http_502 http_503 http_504;
                        #add_header X-Nginx-Cache $upstream_cache_status;
                }
         
                # API 镜像
                location ^~ /imgur-api/ {
                        # 跨域，注意不要和前面的跨域策略冲突/重复
                        add_header 'Access-Control-Allow-Origin' '*';
                        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                        add_header 'Access-Control-Allow-Headers' 
                                           'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
         
                        proxy_pass https://api.imgur.com/;
                        proxy_buffering off;
                        proxy_set_header Referer "";
                        proxy_set_header User-Agent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36";
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                        proxy_set_header Upgrade "websocket";
                        proxy_set_header Connection "Upgrade";
                }

在nginx主管https://论坛.域名.com的配置文件处加上反代行后记得重启nginx并进行测试。这里实际上是代理了两个地方：api上传处和图片显示处

部署到flarum使用

安装改版

笔者fork并制作了一个改版。下面两种方法

方式1

1. 先按照imgur插件发布地址内所述的安装方式安装原版插件。一般情况下就是一行composer require matteocontrini/flarum-imgur-upload。
2. 进入/到flarum安装目录/vendor/matteocontrini/ 并删除flarum-imgur-upload文件夹
3. git clone https://github.com/LCinHK/flarum-imgur-upload.git 生成新的文件夹

方式2

直接使用改版composer require lcinhk/flarum-imgur-upload

使用

在admin管理页，先清除一遍缓存再进入插件页点击imgur-upload插件的设置，应该出现以下内容，否则请检查上一步是否有做错地方。

请将https://api.imgur.com/3/upload和https://i.imgur.com 修改为你一一对应的反代地址。并注意：

• 是否多加/漏写了斜杠。
• 上传的URL是否漏写/3/upload
• 由于是图片上传，也可换成/3/image

效果

效果与没改之前应该是一模一样的。

---

(以下部分为2020/7/30新增)

上传视频

在本人提交的PR merge后， Imgur视频上传插件也支持使用反代了。

composer require ejin/upload-video

注意事项：

• 视频只能使用/3/upload/
• 斜杠规则与图片上传插件不同，注意
• 上传速度太慢+跨域容易出错，请注意大小限制