欢迎访问moshuying.top查看更多信息

详细错误信息 Access to XMLHttpRequest at 'http://localhost:7894/Login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

前端 vue-antd-admin
后端 java servlet

<!-- more -->

前后端分离的项目中肯定会碰到跨域的问题，跨域的原因还是为了安全。最近在做一个项目的时候发现，即使我已经设置了跨域信息，前端还是报这个跨域错误。

后来找了有经验的后台来帮忙也是弄了很久都没有解决问题，后来我慢慢看请求头和仔细寻找前后端的代码终于发现了端倪。

我项目中失败的请求头

参考自MDN中失败的一个请求头

可以发现多了Authorization和Accept两个请求头，这两个请求头来自前端项目中的src/utils/request.js对请求经行了简单的安全设置，使得请求中携带了安全信息，查看源代码发现代码中设置了

axios.defaults.withCredentials= true

表示客户端想要携带验证信息，这部分功能需要后台支持，而后台supportsCredentials一般被设置为false即不支持客户端携带验证信息

对后台代码进行修改

protected void doFilter(HttpServletRequest req, HttpServletResponse res, FilterChain chain) throws IOException, ServletException {
    res.addHeader("Access-Control-Allow-Origin", req.getHeader("Origin"));
    res.addHeader("Access-Control-Allow-Methods", "*");
    res.addHeader("Access-Control-Allow-Headers", "Accept,Authorization,DNT,Content-Type,Referer,User-Agent");
    res.addHeader("Access-Control-Allow-Credentials","true"); // 允许携带验证信息
    chain.doFilter(req, res);
}

问题解决

参考链接

mozilla的HTTP访问控制
介绍了跨域中其他的头信息

gsap是目前非常流行的前端动画框架，可以非常轻松构造出复杂的动画效果，这里仅对我实际使用中的一些例子进行总结

<!-- more -->

官网

示例

文章种所使用代码的在线示例

基础用法

// 声明一个滚动控制器
let ctrl = new ScrollMagic.Controller({
  globalSceneOptions:{
    offset:-200
  }
})


// MORE+ 
Array.from(document.querySelectorAll(".more")).forEach((el,ix)=>{
  let moreLink = new TimelineMax();
  moreLink.from(el,{yPercent:300,opacity:0}) // 在timelineMax中 from是指从某种样式过渡到现在的样式
  new ScrollMagic.Scene({
    triggerElement:document.querySelectorAll("#app div.home")[0].children[ix+3],
    triggerHook:0.35,
    offset:200
  }).setTween(moreLink).addTo(ctrl)
})

// 同时控制两个元素的过渡动画

// 师资简介
init_swiper_teachear(){
  const vue = this
  class SwiperTeacher{
    now = 0
    max = vue.swiperTeacher.length-1
    imgDom = null;
    infosDom = null;
    numListDom = null
    constructor () {
      vue.$nextTick(()=>{this.getDom()})
    }
    next(){
      return new Promise(async (resolve) => {
        if(this.now === this.max) vue.goNext('ADVANTAGE');

        const imgEnd = gsap.to(this.imgDom[this.imgDom.length - 1 -this.now],{xPercent:-100,ease:'power2.out'})
        const infosEnd = gsap.to(this.infosDom[0],{xPercent:(this.now+1) * 100,ease:'power2.out'})

        await imgEnd
        await infosEnd
        this.now+=1
        resolve()
      })
    }
    pre(){
      return new Promise(async (resolve) => {
        if(this.now===0){resolve();return}
        this.now-=1
        const imgEnd = gsap.to(this.imgDom[this.imgDom.length - 1 - this.now],{xPercent:0,ease:'power2.out'})
        const infosEnd = gsap.to(this.infosDom[0],{xPercent:(this.now)*100,ease:'power2.out'})

        await imgEnd
        await infosEnd
        resolve()
      })
    }
    async go(ix){
      const needGo = ix-this.now
      if(needGo===0) return;
      if(needGo<0){
        for(let i = 0;i<-needGo;i++){await this.pre()}
      }else{
        for(let i = 0;i<needGo;i++){await this.next()}
      }
    }
    getDom(){
      this.imgDom = document.querySelectorAll('.introductionOfTeachers .sliderContent .imgContent .img')
      this.infosDom = document.querySelectorAll('.introductionOfTeachers .sliderContent .infoContent')
      this.numListDom = document.querySelectorAll('.introductionOfTeachers .point-teacher .numList')
    }
  }

  let control =  new SwiperTeacher()
  control = new Proxy(control,{
    set (target, p, value) {
      if(p==='now'){
        control.numListDom.forEach((el,ix)=>{
          el.classList.remove('active')
          if(ix===value){el.classList.add('active')}
        })
      }
      target[p] = value
      return true
    }
  })
  this.$refs['sliderRight-teacher'].addEventListener('click',async ()=>{await control.next()})
  this.$refs['sliderLeft-teacher'].addEventListener('click',async ()=>{await control.pre()})
  this.$nextTick(()=>{this.$refs['numList-teacher'].forEach((el,ix)=>{el.addEventListener('click',async ()=>{await control.go(ix)})})})
  let randomTeacher = new TimelineMax()
  randomTeacher.from('div.introductionOfTeachers .sliderContent',{
    yPercent:100,
    opacity:0,
    onStart(){
      vue.swiperTeacher = vue.randomArr(vue.raw_teacher_data,5)
      control.now = 0
    }
  })
  randomTeacher.from('div.introductionOfTeachers .point-teacher',{
    yPercent:100,
    opacity:0
  })
  new ScrollMagic.Scene({triggerElement:'div.introductionOfTeachers',triggerHook:0.35}).setTween(randomTeacher).addTo(ctrl)
}

// 对某个按钮的过渡动画经行处理 通过添加一层元素来经行动画 高阶函数来处理抖动

// 选择院校和新闻大按钮
init_design_button(){
  Array.from(document.querySelectorAll('div.selectInstitution .listContent .designButton,div.news .listContent .designButton')).forEach((el,ix)=>{
    class onceFunction{
      constructor (bg) {
        this.bg = bg
        this.end = false
      }
      main(){
        this.bg.style.backgroundColor = '#e06730'
        this.bg.style.visibility = 'unset'
        gsap.from(this.bg,{scaleX:0}).then(()=>{this.end = true})
      }
      move(){
        this.main()
        this.move = ()=>{}
      }
      leave(){
        if(this.end){
          this.bg.style.visibility = 'hidden'
          this.move =()=>{
            this.main()
            this.move = ()=>{}
          }
        }
      }
    }
    const o = new onceFunction(el.childNodes[0].childNodes[0])
    el.addEventListener('mousemove', ()=>{o.move()})
    el.addEventListener('mouseleave',()=>{o.leave()})
    if(ix===0||ix===3){
      o.move()
    }
  })
}

clone代码后查看运行时效果,或立即访问这里查看效果https://moshuying.top仓库链接，点个免费的星星感激不尽。

主题文件默认情况下似乎不会自动clone可以切到主题目录下下载主题，可以自行clone主题

最近想在hexo中嵌入一些shader，折腾了一些时间后终于完善，实际上用这种方法不仅可以在hexo中嵌入shader,也可以嵌入babylonjs,pxixjs,Layabox,Egret,Cocos2等，先看效果，原理什么的其实很简单。

由于一些shader特别消耗显卡性能，在glsl_snippets.js中判定如果第一帧渲染时间超过0.4秒就不再渲染了。

也可以点击shader暂停渲染

嵌入shader

shader来源shaderToy
完全支持shadertoy的代码，参考自大神的代码stackoverflow，在这位大神的代码里获取到完全兼容shaderToy的思路。并将其改成更适用在hexo中。

示例代码

<!-- 至少需要一个div来放置iframe，这样可以方便的将代码移入文章底部 -->
<div id="three"></div>
<script type="module" id="threeMain">
if (!(self.frameElement && self.frameElement.tagName == "IFRAME")) {
  import("http://localhost:4000/uploads/createTHREE.js").then((result) => result.initHexoThreeModule(document.getElementById("three"),document.getElementById("threeMain")));
} else {
  // 这里的代码会被直接执行，window指向iframe内的window（其实就是把代码整个移动到了iframe内）
  import('http://localhost:4000/uploads/glsl_snippets.js').then(async res=>res.glsl_snippets(res.anotherGlsl))
}
</script>

显示效果

嵌入threejs3D场景

一般情况下不建议在一个页面放多个效果如有必要，可以通过交互时渲染，在视图内渲染等方法优化，避免页面卡死

建议clone下这个仓库并运行起来，这两个效果都是可以交互的，也可以直接访问我的小站查看效果https://moshuying.top

实现原理

原因就是hexo对md文件中的script会渲染到页面上，但是不会显示出来，这就有充足的操作空间了。

这里使用iframe的主要原因就是防止来回切换页面导致的webgl上下文问题。不然也不至于这么麻烦。

// 创建iframe并返回iframe内的window对象
function createIframe(divNode) {
  return new Promise((resolve) => {
    let iframe = document.createElement("iframe");
    // ...
    iframe.style =
      "position: absolute; width: 100%; height: 100%; left: 0; top: 0;border:none;";
    iframe.onload = () => resolve(iframe.contentWindow);
    divNode.style = "position: relative; width: 100%; height: 0; padding-bottom: 75%;";
    divNode.appendChild(iframe);
  });
}

创建完iframe后可以为iframe中加载对象了，之前使用的是经典前端的script src加载方式，考虑到可能会被用到，这里保留了函数方便后续修改。
实际使用中利用module中的import()函数直接引入在线文件即可

function cdnLoadTHREE(divNode) {
  return createIframe(divNode).then((iframe_window) => {
    // 创建完iframe才有了iframe内的iframe_window对象
    let link = document.createElement('link')
    link.href = createCss() // 这里对一些样式做了简单修改。
    link.rel = 'stylesheet'
    link.type = 'text/css'
    iframe_window.document.head.appendChild(link);
    return new Promise((resolve)=>resolve(iframe_window));
  });
}

最后将整个script标签复制到iframe内，代码会在复制完后立即执行，由于代码已经在iframe内了，所以window也指向了iframe中，这一步才使得可以方便的使用module保证了向前兼容的同时，也能对老式的代码向下兼容。不至于出现一些奇奇怪怪的问题。

function initHexoThreeModule(divNode,scriptNode) {
  let link = document.createElement("link");
  link.href = createCss();
  link.rel = "stylesheet";
  link.type = "text/css";
  document.head.appendChild(link);
  if(divNode && scriptNode){
    cdnLoadTHREE(divNode).then((iframe_window)=>{
      let script = document.createElement('script')
      script.src = createBlob(scriptNode.text,'application/javascript')
      iframe_window.document.head.appendChild(script)
    })
  }
}

加载iframe到hexo中的完整代码
在iframe中加载shader的完整代码

javascript正常的英文编码是utf-8的，mysql默认存的也是这种编码，而emoji表情是utf-16的，这就导致了db存储emoji会有问题，所以最好的方式是，把emoji先转成utf-8的这种实体编码，存到数据库里，要使用的时候，从db拿出来，再解码成utf-16的形式。

原文章

{

 // 表情转码

 utf16toEntities(str) {

 const patt = /[ud800-udbff][udc00-udfff]/g; // 检测utf16字符正则

 str = str.replace(patt, (char) => {

 let H;

 let L;

 let code;

 let s;

 if (char.length === 2) {

 H = char.charCodeAt(0); // 取出高位

 L = char.charCodeAt(1); // 取出低位

 code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法

 s = `&#${code};`;

 } else {

 s = char;

 }

 return s;

 });

 return str;

 },

 // 表情解码

 entitiestoUtf16(strObj) {

 const patt = /&#d+;/g;

 const arr = strObj.match(patt) || [];

 let H;

 let L;

 let code;

 for (let i = 0; i < arr.length; i += 1) {

 code = arr[i];

 code = code.replace('&#', '').replace(';', '');

 // 高位

 H = Math.floor((code - 0x10000) / 0x400) + 0xD800;

 // 低位

 L = ((code - 0x10000) % 0x400) + 0xDC00;

 code = `&#${code};`;

 const s = String.fromCharCode(H, L);

 strObj = strObj.replace(code, s);

 }

 return strObj;

 }

}

使用示例

const s = 'test emoji 👇👉👈🙌'; 

const dbSaveStr = utf16toEntities(s);

// 结果是： 'test emoji 👇👉👈🙌' 这样子的实体编码字符串存到db就没问题了

// 要使用时，想数据库中拿到上面的存储记录

cosnt dbOutStr = 'test emoji 👇👉👈🙌' ;

// 然后将其中的emoji转码成表情使用 

const ret = entitiestoUtf16(dbOutStr ) 

// 得到： 'test emoji 👇👉👈🙌'; 

 将emoji转成UTF-16

这是更通用的方式，因为上面那种只是在web端能显示，如果是要存到db，给c++获取数据再客户端app展示，就行不通了。必须转成unicode-16才行。

// http://www.2ality.com/2013/09/javascript-unicode.html

function toUTF16(codePoint) {

 var TEN_BITS = parseInt('1111111111', 2);

 function u(codeUnit) {

 return 'u'+codeUnit.toString(16).toUpperCase();

 }

 if (codePoint <= 0xFFFF) {

 return u(codePoint);

 }

 codePoint -= 0x10000;

 // Shift right to get to most significant 10 bits

 var leadSurrogate = 0xD800 + (codePoint >> 10);

 // Mask to get least significant 10 bits

 var tailSurrogate = 0xDC00 + (codePoint & TEN_BITS);

 return u(leadSurrogate) + u(tailSurrogate);

}

使用示例

// using codePointAt, it's easy to go from emoji

// to decimal and back.

// Emoji to decimal representation

"😀".codePointAt(0)

>128512

// Decimal to emoji

String.fromCodePoint(128512)

>"😀"

// going from emoji to hexadecimal is a little

// bit trickier. To convert from decimal to hexadecimal,

// we can use toUTF16.

// Decimal to hexadecimal

toUTF16(128512)

> "uD83DuDE00"

// Hexadecimal to emoji

"uD83DuDE00"

> "😀"

判断字符串是否为emoji字符

const emojiReg = /(?:[u2700-u27bf]|(?:ud83c[udde6-uddff]){2}|[ud800-udbff][udc00-udfff])[ufe0eufe0f]?(?:[u0300-u036fufe20-ufe23u20d0-u20f0]|ud83c[udffb-udfff])?(?:u200d(?:[^ud800-udfff]|(?:ud83c[udde6-uddff]){2}|[ud800-udbff][udc00-udfff])[ufe0eufe0f]?(?:[u0300-u036fufe20-ufe23u20d0-u20f0]|ud83c[udffb-udfff])?)*/;

文章来源

1 安装依赖

npm install --save-dev babel-plugin-module-resolver
# yarn add babel-plugin-module-resolver --dev

根目录新增.babelrc文件
参考以下内容按您项目中的需要去修改

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "@/actions": "./actions",
          "@/components": "./components",
          "@/constants": "./constants",
          "@/pages": "./pages",
          "@/public": "./public",
          "@/reducers": "./reducers",
          "@/utils": "./utils"
        }
      }
    ]
  ]
}

修改tsconfig.json文件

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["./components/*"],
      "@pages/*": ["./pages/*"],
      "@public/*": ["./public/*"]
    }
  }
}

注意"baseUrl": "./",不能省去，否则ts报Option 'paths' cannot be used without specifying '--baseUrl' option.错误

next.js中配置alias也可以参考如上步骤

ahk键盘增强✨✨✨更新至v1.1

myahk旨在增强windows下的键盘功能?

首先感谢ahk的大神们,这个工具能极大地增加生产力

ahk的一个键盘增强脚本,仅在winwods下可用,长期更新 仓库链接

2020/6/30日更新

使用了小半年之后发现了一些问题，所以更新了一下

• [x] 移除了连点器
• [x] 移除了打开指定文件夹，在开始界面中显然更好用
• [x] 已关闭默认打开键鼠(开机了之后会忘记关闭蒙蔽半天)
• [ ] 预计的新特性，按键显示，此功能可以方便做教程

安装

windows执行以下步骤,?复制粘贴到命令行中执行

未安装git和ahk的用户可以在联网状态下使用一行命令安装

Set-ExecutionPolicy Bypass -Scope Process -Force;[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'));choco install git;choco install autohotkey.install;git clone https://gitee.com/moshuying/myAHK.git;cd myAHK;.\easyWork.ahk;New-Item -ItemType SymbolicLink -Path "C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup" -Name ".\easyWork.ahk.lnk" -Value ".\easyWork.ahk"

有ahk和git的用户可以自行按步骤安装
ahk下载地址

git clone https://gitee.com/moshuying/myAHK.git;
cd myAHK;
./easyWork.ahk;
New-Item -ItemType SymbolicLink -Path "C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup" -Name ".\easyWork.ahk.lnk" -Value ".\easyWork.ahk"

功能概要

由于用caps + a替换了capslock功能,所以下表中的caps均指向capslock按键

长期更新,觉得有用麻烦点个star吧

vscode 快捷键大全

官方文档

widnows
liunx
mac

挺简单的，文档描述清晰内容排版也不错，一看就懂，这里写的是我自己翻译的(太过简单的没必要翻译)，同时也为了方便自己查阅和使用

[注意] 插件的快捷键请在插件说明（文档）内查看，vscode不提供此类快捷键

Visual Studio Code (Keyboard Shortcuts for Windows)

[Other operating systems’ keyboard shortcuts and additional unassigned shortcuts available at aka.ms/vscodekeybinding]
一个前端开发者的笔记

ahk键盘增强✨✨✨

ahk的一个键盘增强脚本,仅在winwods下可用,长期更新
仓库链接

首先感谢ahk的大神们,这个工具能极大地增加生产力

功能简介

myahk旨在增强windows下的键盘功能😎

使用流程

windows执行以下步骤,💻复制粘贴到命令行中执行

国内用户把clone仓库链接中的hub换成ee即可，两个仓库完全同步

git clone https://github.com/moshuying/myAHK.git
# git clone https://gitee.com/moshuying/myAHK.git
cd myAHK
AutoHotkey39219
easyWork.ahk

功能概要

由于用caps + a替换了capslock功能,所以下表中的caps均指向capslock按键

长期更新,欢迎各路大神提issue

如果你觉得 git 很迷惑人，那么这份小抄正是为你准备的！请注意我有意跳过了 git commit、git pull/push 之类的基本命令，这份小抄的主题是 git 的一些「高级」用法。

导航 —— 跳到之前的分支

git checkout -

查看历史

# 每个提交在一行内显示
git log --oneline

# 在所有提交日志中搜索包含「homepage」的提交
git log --all --grep='homepage'

# 获取某人的提交日志 
git log --author="Maxence"

哎呀：之前重置了一个不想保留的提交，但是现在又想要回滚？

# 获取所有操作历史
git reflog

# 重置到相应提交
git reset HEAD@{4}
# ……或者……
git reset --hard <提交的哈希值>

详见我的另一篇文章 What's happens when you git commit

哎哟：我把本地仓库搞得一团糟，应该怎么清理？

git fetch origin
git checkout master
git reset --hard origin/master

查看我的分支和 master 的不同

git diff master..my-branch

定制提交

# 编辑上次提交
git commit --amend -m "更好的提交日志"

# 在上次提交中附加一些内容，保持提交日志不变git add . && git commit --amend --no-edit

# 空提交 —— 可以用来重新触发 CI 构建
git commit --allow-empty -m "chore: re-trigger build"

如果你不知道该怎么写提交日志，可以看我写的这篇介绍 Angular 风格的提交日志惯例的文章。

squash 提交

比方说我想要 rebase 最近 3 个提交：

• git rebase -i HEAD~3
• 保留第一行的 pick，剩余提交替换为 squash 或 s
• 清理提交日志并保存（vi 编辑器中键入 :wq 即可保存）

pick 64d26a1 feat: add index.js
s 45f0259 fix: update index.js
s 8b15b0a fix: typo in index.js

修正

比方说想在提交 fed14a4c 加上一些内容。

git 提交分支

git add .
git commit --fixup HEAD~1
# 或者也可以用提交的哈希值（fed14a4c）替换 HEAD~1

git rebase -i HEAD~3 --autosquash
# 保存并退出文件（VI 中输入 `:wq`）

rebase 的时候在每个提交上执行命令

如果特性很多，一个分支里可能有多个提交。如果测试失败了，你希望能找到导致测试失败的提交。这时候你可以使用 rebase --exec 命令在每个提交上执行命令。

# 在最近 3 个提交上运行 `npm test` 命令
git rebase HEAD~3 --exec "npm test"

暂存

暂存不止是 git stash 和 git stash pop ;)

# 保存所有正在追踪的文件
git stash save "日志信息"

# 列出所有的暂存项
git stash list

# 获取并删除暂存项
git stash apply stash@{1}
git stash drop stash@{1}
# ……或使用一条命令……
git stash pop stash@{1}

清理

# 移除远程仓库上不存在的分支
git fetch -p

# 移除所有包含 `greenkeeper` 的分支
git fetch -p && git branch --remote | fgrep greenkeeper | sed 's/^.\{9\}//' | xargs git push origin --delete

GitHub = Git + Hub

我把 Hub 当成 git 的一个封装来用。你如果也想这么做，可以设置一个别名：alias git='hub'

# 打开浏览器访问仓库 url（仅限 GitHub 仓库）git browse

其他命令可以参考这里。

额外福利：我最喜爱的 git 别名

alias g='git'
alias glog='git log --oneline --decorate --graph'
alias gst='git status'
alias gp='git push'
alias ga='git add'alias gc='git commit -v'

# 🤘
alias yolo='git push --force'

# 每周站会汇报工作时用
git-standup() {
    AUTHOR=${AUTHOR:="`git config user.name`"}

    since=yesterday
    if [[ $(date +%u) == 1 ]] ; then
        since="2 days ago"
    fi

    git log --all --since "$since" --oneline --author="$AUTHOR"
}

你最喜欢的 git 命令是哪个呢？

感谢花时间阅读本文。我希望你觉得这篇文章有所帮助！

原文作者：Maxence Poutord ，内容经授权转载自 New Frontend 网站。

vue超简单加载字体方法,解决scss难加载字体的问题

scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法

在App.vue的style标签下引入字体文件后,scss设置的字体依旧可以正确识别,注意style的lang不要写,就使用原生css

示例引入

<style>
@font-face{
    font-family: pingfang;
    src: url('./style/pingfang.ttf')
}
</style>

然后想要的位置设置font-family为pingfang即可,自己定义别的名字也可以