解决Waline使用图片上传图床跨域错误问题

@auther by sizaf

错误描述:

说明

我采用的是Volantis 作为主题

在主题_config.yml 文件中

修改waline 配置

waline:
  js: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js
  path: # 全局评论地址 目前设置全局评论地址后visitor失效,这是waline的问题
  placeholder: 允许匿名评论，评论支持贴图，大家在截图后，在评论框粘贴，自动传至图床，欢迎使用体验~  # 评论占位提示
  imageHosting: https://7bu.top/api/upload # 图床api「默认使用去不图床」
  # 其他配置项按照yml格式继续填写即可 除了 [el path placeholder uploadImage] 选项
  meta: [nick,mail,link] # waline comment header info
  requiredFields: [nick,mail]
  serverURL: # Waline 的服务端地址「必填」 测试用地址: https://waline-ruddy.vercel.app
  avatar: robohash # gravatar style https://waline.js.org/client/basic.html#avatar
  pageSize: 10 # 评论每页显示数量
  lang: zh-CN
  visitor: true

其中 serverURL 选项请参考文档使用说明

waline文档

https://waline.js.org/guide/get-started.html

若采用其他主题,可按照官方设置加入 uploadImage 即可, 具体参考

<head>
  ..
  <script src='//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script>
  ...
</head>
<body>
  ...
  <div id="waline"></div>
  <script>
    new Waline({
      el: '#waline',
      path: location.pathname,
      serverURL: 'https://your-domain.vercel.app'
      uploadImage: function(file) {
      const formData = new FormData();
      formData.append('image', file);
      return fetch('https://7bu.top/upload/upload.html', {
        method: 'POST',
        body: formData
      }).then(resp => resp.json()).then(resp => resp.data.url);
      }
    });
  </script>
</body>

修改

如果你使用volantis作为主题,

那么只需要修改themes\volantis\layout\_third-party\comments\waline\script.ejs 文件中的uploadImage函数

将your's token value 替换为你自己的图床 token

  uploadImage: function(file) {
   const formData = new FormData();
   formData.append('image', file);
   const token = "your's token value";
   return fetch('<%= theme.comments.waline.imageHosting %>', {
   	method: 'POST',
   	body: formData,
     headers: {'Authorization': token}
   }).then(resp => resp.json()).then(resp => resp.data.url);
},

若采用其他主题

请修改代码将your's token value 替换为你自己的图床 token

<head>
  ..
  <script src='//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script>
  ...
</head>
<body>
  ...
  <div id="waline"></div>
  <script>
    new Waline({
      el: '#waline',
      path: location.pathname,
      serverURL: 'https://your-domain.vercel.app'
      uploadImage: function(file) {
      const formData = new FormData();
      const token = " your's token value";
      formData.append('image', file);
      return fetch('https://7bu.top/upload/upload.html', {
        method: 'POST',
        body: formData,
        headers: {'Authorization': token}
      }).then(resp => resp.json()).then(resp => resp.data.url);
      }
    });
  </script>
</body>