{ "version": "https://jsonfeed.org/version/1", "title": "Hito的公告栏", "subtitle": "天下事有难易乎?为之,则难者亦易矣", "icon": "https://blog.jingxiyuan.cn/images/favicon.ico", "description": "hito的博客", "home_page_url": "https://blog.jingxiyuan.cn", "items": [ { "id": "https://blog.jingxiyuan.cn/2022/10/06/Nginx%E9%85%8D%E7%BD%AEiframe%E8%AE%BF%E9%97%AE/", "url": "https://blog.jingxiyuan.cn/2022/10/06/Nginx%E9%85%8D%E7%BD%AEiframe%E8%AE%BF%E9%97%AE/", "title": "Nginx配置iframe访问", "date_published": "2022-10-06T15:46:00.000Z", "content_html": "

# X-Frame-Options 响应头配置详解

\n

  X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在,或者 中展现的标记。网站可以使用此功能,来确保自己网站的内容没有被嵌套到别人的网站中去,也从而避免了点击劫持 (clickjacking) 的攻击。
\nX-Frame-Options 三个参数:

\n

1、 DENY

\n

  表示该页面不允许在 frame 中展示,即便是在相同域名的页面中嵌套也不允许。

\n

2、SAMEORIGIN

\n

  表示该页面可以在相同域名页面的 frame 中展示。

\n

3、ALLOW-FROM uri

\n

  表示该页面可以在指定来源的 frame 中展示。

\n

  换一句话说,如果设置为 DENY,不光在别人的网站 frame 嵌入时会无法加载,在同域名页面中同样会无法加载。另一方面,如果设置为 SAMEORIGIN,那么页面就可以在同域名页面的 frame 中嵌套。正常情况下我们通常使用 SAMEORIGIN 参数。

\n

# Apache 配置

\n

  需要把下面这行添加到'site' 的配置中

\n
   Header always append X-Frame-Options SAMEORIGIN\n
\n

# Nginx 配置

\n

  需要添加到 ‘http’, ‘server’ 或者 ‘location’ 的配置项中,个人来讲喜欢配置在‘server’ 中

\n

  正常情况下都是使用 SAMEORIGIN 参数,允许同域嵌套

\n
   add_header X-Frame-Options SAMEORIGIN;\n
\n

  允许单个域名 iframe 嵌套

\n
   add_header X-Frame-Options ALLOW-FROM http://xxx.com/;\n
\n

  允许多个域名 iframe 嵌套,注意这里是用逗号分隔

\n
   add_header X-Frame-Options "ALLOW-FROM http://xxx.com/,https://xxx.com/";\n
\n

# Tomcat 配置

\n

  在‘conf/web.xml’填加以下配置

\n
<filter>
        <filter-name>httpHeaderSecurity</filter-name>
        <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
        <init-param>
            <param-name>antiClickJackingOption</param-name>
            <param-value>SAMEORIGIN</param-value>
        </init-param>
        <async-supported>true</async-supported>
    </filter>
<filter-mapping>
        <filter-name>httpHeaderSecurity</filter-name>
        <url-pattern>/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
</filter-mapping>

# IIS 配置

\n

  添加下面的配置到 ‘Web.config’文件中

\n
<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name=\"X-Frame-Options\" value=\"SAMEORIGIN\" />
    </customHeaders>
  </httpProtocol>
</system.webServer>
", "tags": [ "技术分享", "nginx", "iframe" ] }, { "id": "https://blog.jingxiyuan.cn/2022/09/28/%E6%B7%B1%E6%B7%B1%E7%9A%84%E6%8C%AB%E8%B4%A5%E5%92%8C%E6%97%A0%E5%8A%A9%E6%84%9F/", "url": "https://blog.jingxiyuan.cn/2022/09/28/%E6%B7%B1%E6%B7%B1%E7%9A%84%E6%8C%AB%E8%B4%A5%E5%92%8C%E6%97%A0%E5%8A%A9%E6%84%9F/", "title": "深深的挫败和无助感", "date_published": "2022-09-28T08:02:00.000Z", "content_html": "

  一个月都过去了,工作还没有着落!

\n", "tags": [ "心情", "郁闷" ] }, { "id": "https://blog.jingxiyuan.cn/2022/09/27/nginx%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1%E9%85%8D%E7%BD%AE/", "url": "https://blog.jingxiyuan.cn/2022/09/27/nginx%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1%E9%85%8D%E7%BD%AE/", "title": "nginx负载均衡配置", "date_published": "2022-09-27T06:45:00.000Z", "content_html": "

# nginx 负载均衡配置

\n
    \n
  1. 轮询(默认)
  2. \n
\n

  每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器 down 掉,能自动剔除。

\n
upstream my_server {\n\tserver 192.168.0.2:8080;\n\tserver 192.168.0.3:8080;\n}\n\nserver {\n\tlisten 80;\n\tserver_name 192.168.0.1;\n\n\t# Path to the root of your installation\n\tlocation / {\n\t\tproxy_pass http://my_server;\n\t}\n\t\n}\n
\n
    \n
  1. weight 权重策略
  2. \n
\n

  weight 代表权重,默认为 1,权重越高被分配的客户端越多,指定轮询几率。weight 和访问比率成正比,用于后端服务器性能不均的情况。

\n
upstream my_server {\n\tserver 192.168.0.2:8080 weight=1;\n\tserver 192.168.0.3:8080 weight=2;\n}\n\nserver {\n\tlisten 80;\n\tserver_name 192.168.0.1;\n\n\t# Path to the root of your installation\n\tlocation / {\n\t\tproxy_pass http://my_server;\n\t}\n\t\n}\n
\n
    \n
  1. ip_hash
  2. \n
\n

  每个请求按访问 ip 的 hash 结果分配,这样每个访客固定访问一个后端服务器,可以解决 session 的问题。

\n
upstream my_server {\n\tip_hash;\n\tserver 192.168.0.2:8080;\n\tserver 192.168.0.3:8080;\n}\n\nserver {\n\tlisten 80;\n\tserver_name 192.168.0.1;\n\n\t# Path to the root of your installation\n\tlocation / {\n\t\tproxy_pass http://my_server;\n\t}\n\t\n}\n
\n
    \n
  1. fair (第三方)
  2. \n
\n

  按后端服务器的响应时间来分配请求,响应时间短的优先分配。

\n
upstream my_server {\n\tserver 192.168.0.2:8080;\n\tserver 192.168.0.3:8080;\n\tfair;\n}\n\nserver {\n\tlisten 80;\n\tserver_name 192.168.0.1;\n\n\t# Path to the root of your installation\n\tlocation / {\n\t\tproxy_pass http://my_server;\n\t}\n\t\n}\n
\n
    \n
  1. 动静分离
  2. \n
\n

  把静态的资源,比如图片,css,js 等先加载到 Nginx 的服务器里。

\n", "tags": [ "技术分享", "nginx", "负载均衡" ] }, { "id": "https://blog.jingxiyuan.cn/2022/09/26/%E8%A7%A3%E5%86%B3Hexo-Shoka%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90%E6%97%A0%E6%B3%95%E6%92%AD%E6%94%BE%E7%9A%84%E9%97%AE%E9%A2%98/", "url": "https://blog.jingxiyuan.cn/2022/09/26/%E8%A7%A3%E5%86%B3Hexo-Shoka%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90%E6%97%A0%E6%B3%95%E6%92%AD%E6%94%BE%E7%9A%84%E9%97%AE%E9%A2%98/", "title": "解决Hexo+Shoka背景音乐无法播放的问题", "date_published": "2022-09-26T11:30:00.000Z", "content_html": "

  今天突然发现博客的音乐无法播放了。经过一顿查找,发现是因为 https://api.i-meto.com/meting/api 调用出错了。shoka 主题应该是通过这个网站提取音乐地址、图片等信息。通过断点发现网易播放列表还是能正常获取的,只是列表中的具体音乐、图片无法获取了。于是自己用获取的列表信息组装出正确的 url 问题基本解决。只针对网易播放列表,图片只能使用一张固定的。

\n

  解决方法如下:

\n

    到 themes\\shoka\\source\\js_app 目录下打开 player.js 文件,在最底部 init (config) 下加入 vendorJs ('fancybox');,然后找到 56 行用下面的代码替换即可。

\n
fetch: function(source) {
      var list = []
      return new Promise(function(resolve, reject) {
        source.forEach(function(raw) {
          var meta = utils.parse(raw)
          if(meta[0]) {
            var skey = JSON.stringify(meta)
            var playlist = store.get(skey)
            if(playlist) {
\t\t\t  // 自己修改 - start
\t\t\t  var audioInfos = JSON.parse(playlist);
\t\t\t  var neteaseStartUrl = \"https://music.163.com/song/media/outer/url?id=\";
\t\t\t  if (meta[0] == \"netease\" && audioInfos && audioInfos.length>0 && !audioInfos[0].url.startsWith(neteaseStartUrl)) {// 如果是网易音乐就自己构建 url
\t\t\t\t  jQuery.ajax({
\t\t\t\t\t  url: audioInfos[0].url,
\t\t\t\t\t  type: 'get',
\t\t\t\t\t  async: false,
\t\t\t\t\t  timeout: 5000,
\t\t\t\t\t  complete : function(XMLHttpRequest, status){
\t\t\t\t\t\t  if (XMLHttpRequest.status != 200) {
\t\t\t\t\t\t\t  audioInfos.forEach(function(audioInfo) {
\t\t\t\t\t\t\t\t  var id = audioInfo.url.substring(audioInfo.url.indexOf(\"id=\")+3, audioInfo.url.indexOf(\"&auth=\"));
\t\t\t\t\t\t\t\t  audioInfo.url = neteaseStartUrl + id;
\t\t\t\t\t\t\t\t  audioInfo.pic = \"https://p3.music.126.net/Vji3PQJAZ2C7gS_6X51NFQ==/109951164723650033.jpg?param=200y200\";
\t\t\t\t\t\t\t  })
\t\t\t\t\t\t  }
\t\t\t\t\t\t  list.push.apply(list, audioInfos);
\t\t\t\t\t\t  resolve(list);
\t\t\t\t\t  }
\t\t\t\t  });
\t\t\t  } else {
\t\t\t\t  list.push.apply(list, audioInfos);
\t\t\t\t  resolve(list);
\t\t\t  }
\t\t\t  // 自己修改 - end
            } else {
              fetch('https://api.i-meto.com/meting/api?server='+meta[0]+'&type='+meta[1]+'&id='+meta[2]+'&r='+ Math.random())
                .then(function(response) {
                  return response.json()
                }).then(function(json) {
                  store.set(skey, JSON.stringify(json))
                  list.push.apply(list, json);
                  resolve(list);
                }).catch(function(ex) {})
            }
          } else {
            list.push(raw);
            resolve(list);
          }
        })
      })
    }
", "tags": [ "技术分享", "博客", "Hexo", "Shoka", "背景音乐" ] }, { "id": "https://blog.jingxiyuan.cn/2022/09/23/%E8%A7%A3%E5%86%B3%E5%9F%9F%E5%90%8Dip%E5%8F%98%E5%8A%A8%E5%90%8E%E9%9C%80%E8%A6%81%E9%87%8D%E5%90%AFnginx%E7%9A%84%E9%97%AE%E9%A2%98/", "url": "https://blog.jingxiyuan.cn/2022/09/23/%E8%A7%A3%E5%86%B3%E5%9F%9F%E5%90%8Dip%E5%8F%98%E5%8A%A8%E5%90%8E%E9%9C%80%E8%A6%81%E9%87%8D%E5%90%AFnginx%E7%9A%84%E9%97%AE%E9%A2%98/", "title": "解决域名ip变动后需要重启nginx的问题", "date_published": "2022-09-23T08:17:00.000Z", "content_html": "

  今天突然发现自己的网站不能访问了。经过一顿排查,发现是家里的外网 ip 变动后 nginx 解析的域名 ip 还是旧 ip 导致的。手动重启 nginx 后恢复正常。但这不是长久之计,如果每次 ip 变动都需要重启一次 nginx,想想都头大。于是查询资料后获得了解决办法,方法如下:

\n
location / {\t\n\tresolver 114.114.114.114 valid=60s; #自定义缓存有效时间间隔对变量中的域名进行解析\n\n\tset $my_server "https://ip:port";\n\n\tproxy_pass $my_server;\n}\n
\n", "tags": [ "技术分享", "nginx" ] }, { "id": "https://blog.jingxiyuan.cn/2022/09/22/protobuf%E7%94%9F%E6%88%90js%E6%96%87%E4%BB%B6/", "url": "https://blog.jingxiyuan.cn/2022/09/22/protobuf%E7%94%9F%E6%88%90js%E6%96%87%E4%BB%B6/", "title": "protobuf生成js文件", "date_published": "2022-09-22T02:30:00.000Z", "content_html": "

# 下载工具

\n

protoc-3.19.5-win64.zip

\n

# 生成 js 文件

\n
    \n
  1. \n

    把 xxx.proto 文件拷贝到解压的 protoc-3.19.5-win64\\bin 目录下

    \n
  2. \n
  3. \n

    cmd 到相同的 bin 目录下

    \n
  4. \n
  5. \n

    执行 protoc.exe --js_out=import_style=commonjs,binary:. ./xxx.proto 命令,就会在 bin 目录下生成 xxx_pb.js 文件

    \n
  6. \n
\n", "tags": [ "技术分享", "protobuf", "js" ] }, { "id": "https://blog.jingxiyuan.cn/2022/09/21/%E8%AE%B0%E4%B8%80%E6%AC%A1netty-socket-io%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%BF%9E%E6%8E%A5%E4%B8%8D%E4%B8%8A%E7%9A%84%E9%97%AE%E9%A2%98/", "url": "https://blog.jingxiyuan.cn/2022/09/21/%E8%AE%B0%E4%B8%80%E6%AC%A1netty-socket-io%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%BF%9E%E6%8E%A5%E4%B8%8D%E4%B8%8A%E7%9A%84%E9%97%AE%E9%A2%98/", "title": "记一次netty-socketio服务端连接不上的问题", "date_published": "2022-09-21T01:46:00.000Z", "content_html": "

  今天前端开发跟我反馈用 vue 的 socketio 连接不上后台服务,连接无反应无任何报错。所以不清楚是前端代码问题还是后台服务的问题。由于框架为另一同事搭建,我只负责处理后端业务逻辑部分,所以第一时间我也不清楚具体的原因。于是我找了个第三方的 socket 工具尝试连接,果然有问题。但是只是提示连接不上,无明显错误原因。到后台查看发现有提示 Unknown transport for request 错误,最后通过调试发现 netty-socketio 的库中 AuthorizeHandler 类有段处理 transport 的代码只能接受大写的 WEBSOCKET 或者 POLLING,于是我在工具中按要求填上结果还是不行。然后我在网上搜索也未发现有相关问题,只发现有网友提示需要用 socketio 的库,不要自己写 socket 连接。于是我找了 socket.io.js 来连接,结果还是一样。经过大量调试改代码,最后突发奇想,有没有可能跟 netty-socketio 的版本有关系,于是我把版本从 1.7.20 升级到 1.7.21,结果就奇迹般的好了。

\n
# 总结:就好像大力出奇迹,实在找不到原因的时候不妨升级一下版本,说不定问题就解决了呢!O (∩_∩) O
\n", "tags": [ "经验分享", "心得体会", "netty", "socketIO", "踩坑" ] }, { "id": "https://blog.jingxiyuan.cn/2022/09/17/Hexo-Theme-Shoka-algolia%E6%90%9C%E7%B4%A2%E8%B8%A9%E5%9D%91-1/", "url": "https://blog.jingxiyuan.cn/2022/09/17/Hexo-Theme-Shoka-algolia%E6%90%9C%E7%B4%A2%E8%B8%A9%E5%9D%91-1/", "title": "Hexo + Theme.Shoka + algolia搜索踩坑", "date_published": "2022-09-17T15:12:00.000Z", "content_html": "

# Hexo + Theme.Shoka 安装

\n

  安装介绍

\n

# algolia 注册

\n
    \n
  1. \n

    algolia 不支持国内邮箱注册,而 google 和 github 由于国内被墙也没法使用。所以只能先注册 netlify 然后通过 netlify 注册 algolia。

    \n
  2. \n
  3. \n

    登录 algolia 后创建一个 index,名字随意记住既可。

    \n

    \"2022-09-17-23-32-20.png\"

    \n
  4. \n
  5. \n

    点击右上角红点,弹出窗口点 settings 按钮。

    \n

    \"2022-09-17-23-35-04.png\"

    \n
  6. \n
  7. \n

    点击 API KEYS,获取 appId 和 adminApiKey 填入 hexo 的_config.yml 中 apiKey 暂时不填。

    \n
  8. \n
\n
algolia:\n  appId: #Your appId\n  apiKey: #Your apiKey\n  adminApiKey: #Your adminApiKey\n  chunkSize: 5000\n  indexName: blog #"shoka"\n  fields:\n    - title #必须配置\n    - path #必须配置\n    - categories #推荐配置\n    - content:strip:truncate,0,2000\n    - gallery\n    - photos\n    - tags\n
\n
    \n
  1. \n

    点击 All Api Keys - New Api key 创建一个 api key,Indices 选先前让记住的 index,ACL 选下面图片中的选项。

    \n

    \"2022-09-17-23-47-50.png\"

    \n
  2. \n
  3. \n

    把第 5 步中新建的 api key 填入到第 4 步中的配置中,到此已经完成了百分之九十,只需要重新编译发布即可。不过编译步骤多了一步,在 hexo g 后需要再执行 hexo algolia,至此搜索功能就大功告成了。

    \n
  4. \n
\n", "tags": [] }, { "id": "https://blog.jingxiyuan.cn/2022/09/16/chevereto%E5%9B%BE%E5%BA%8A%E5%AE%89%E8%A3%85/", "url": "https://blog.jingxiyuan.cn/2022/09/16/chevereto%E5%9B%BE%E5%BA%8A%E5%AE%89%E8%A3%85/", "title": "极空间chevereto图床docker版安装", "date_published": "2022-09-16T00:04:00.000Z", "content_html": "

# 安装准备

\n
    \n
  1. \n

    需要先安装好 mysql 数据库

    \n
  2. \n
  3. \n

    选择版本,1.5 版支持中文,之后被维护的团队删除只支持英文

    \n
  4. \n
  5. \n

    本文介绍使用的是 linuxserver_chevereto 的镜像

    \n
  6. \n
  7. \n

    需要预先创建好给 chevereto 使用的库、账户、密码

    \n
  8. \n
\n

# 容器配置

\n
    \n
  1. \n

    映射路径(不要放在高速盘,否则会有权限问题)
    \n\"6150d69d9a170d96e66ca69420f8c4e8.png\"

    \n
  2. \n
  3. \n

    端口
    \n\"08eafb3b30a7eb9b0c0be26ea7a1502a.png\"

    \n
  4. \n
  5. \n

    环境(puid 和 pgid 使用 1000,不要使用 0,否则会报错)
    \n\"01567ca9f31f87f832276be35cc4554b.png\"

    \n
  6. \n
\n

# 初始化配置

\n
    \n
  1. \n

    使用 http:// 极空间 ip:81 (端口号使用上面配置的,我配置的是 81) 进行 web 访问(数据库配置)
    \n\"0.png\"

    \n
  2. \n
  3. \n

    管理员配置(注意 website 配置选择个人,除非需要提供给其它人注册)
    \n\"1.png\"
    \n\"2.png\"

    \n
  4. \n
  5. \n

    默认上传大小是 2M,可通过修改 php.ini 配置提升(路径 /etc/php7/php.ini 查找 upload_max_filesize 进行修改)。之后用管理员登录通过页面 http://xxx/dashboard/settings/image-upload 修改。

    \n
  6. \n
\n

# 安装完成

\n
    \n
  1. 功能少界面也很简单,只作为图片外部链接使用完全够用。图片链接 url 支持的很全。
    \n\"2022-09-16-14-52-29.png\"
    \n\"2022-09-16-14-54-58.png\"
    \n\"2022-09-16-14-56-13.png\"
  2. \n
\n", "tags": [ "技术分享", "心得体会", "踩坑", "docker", "极空间", "图床", "图片上传" ] }, { "id": "https://blog.jingxiyuan.cn/2022/09/14/Hexo%E5%AE%89%E8%A3%85%E6%91%B8%E7%B4%A2/", "url": "https://blog.jingxiyuan.cn/2022/09/14/Hexo%E5%AE%89%E8%A3%85%E6%91%B8%E7%B4%A2/", "title": "Hexo安装摸索", "date_published": "2022-09-14T04:23:55.000Z", "content_html": "

# hexo 博客安装

\n
    \n
  1. \n

    安装 nodejs

    \n
  2. \n
  3. \n

    安装 git

    \n
  4. \n
  5. \n

    安装 hexo(windows 需进入 git bash)

    \n

    npm install -g hexo-cli

    \n
  6. \n
  7. \n

    初始化博客目录

    \n

    hexo init blog

    \n
  8. \n
  9. \n

    进入博客目录

    \n

    cd blog

    \n
  10. \n
  11. \n

    初始化 hexo 到博客目录

    \n

    npm install

    \n
  12. \n
\n

# shoka 主题安装

\n
    \n
  1. \n

    下载主题

    \n

    git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

    \n
  2. \n
  3. \n

    卸载 hexo-renderer-marked 以及别的 markdown 文件渲染器

    \n

    npm un hexo-renderer-marked --save

    \n
  4. \n
  5. \n

    安装(md 文件渲染器,压缩 css/js/html)

    \n

    npm i hexo-renderer-multi-markdown-it --save

    \n
  6. \n
  7. \n

    安装(给生成的 css 文件们添加浏览器前缀)

    \n

    npm i hexo-autoprefixer --save

    \n
  8. \n
  9. \n

    安装(站内搜索功能)

    \n

    npm i hexo-algoliasearch --save

    \n
  10. \n
  11. \n

    安装(文章或站点字数及阅读时间统计)

    \n

    npm i hexo-symbols-count-time --save

    \n
  12. \n
  13. \n

    安装(生成 Feed 文件)

    \n

    npm i hexo-feed --save

    \n
  14. \n
\n

# Hexo 部分常用命令

\n\n

# 安装 hexo-admin(编写博客插件)

\n\n
admin:\nusername: username\npassword_hash: xxxxxx\nsecret: 'my super secret phrase' #用单引号包裹\ndeployCommand: 'hexo_publish.sh' #windows用hexo_publish.bat,linux用hexo_publish.sh\n
\n

# hexo_publish.sh

\n
#!/bin/bash\n\nhexo clean\nhexo g\nhexo d\n
\n

# hexo_publish.bat

\n
@echo off\ncd D:\\blog\nd:\n@cmd /c "hexo clean&& hexo g&&hexo d&&echo success"\n
\n", "tags": [ "技术分享", "心得体会", "踩坑", "博客", "Hexo" ] }, { "id": "https://blog.jingxiyuan.cn/1970/01/01/hello-world/", "url": "https://blog.jingxiyuan.cn/1970/01/01/hello-world/", "title": "Hello World", "date_published": "1970-01-01T00:00:00.000Z", "content_html": "

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

\n

# Quick Start

\n

# Create a new post

\n
$ hexo new "My New Post"\n
\n

More info: Writing

\n

# Run server

\n
$ hexo server\n
\n

More info: Server

\n

# Generate static files

\n
$ hexo generate\n
\n

More info: Generating

\n

# Deploy to remote sites

\n
$ hexo deploy\n
\n

More info: Deployment

\n", "tags": [] } ] }