2021年4月

给笔记本加了根 8G 内存条

• 作者: Chuwen
• 时间: 2021-04-30
• 分类: 生活
• 评论

某宝买的 三星 DDR4 2666MHz 8G 内存条，价格 279 > 可能买贵了，专挑涨价时候买...  可怜的 8G 内存，开个 Chrome、PHPStorm、Docker 内存占用就 92%+ 了 笔记本是小米游戏本 i5-8300H 款，买了快三年（买游戏本不打游戏是种什么体验？） 这个本子螺丝不是常规的螺丝，只能再去买个螺丝刀套装，花了十多块专门拿来拆 ## 内存条来个特写  ## 开拆   ## 安装完成和自带内存条对比下  --- # CPU-Z 截图  ### 自带内存条：  ### 自己购买的内存条： > 20年第50周生产，也就是 2020年12月份 第二周生产的，还算比较新吧 > >   # 装上之后的感受 Windows 系统下开机感觉快乐些，内存当然是随便造作了 macOS 下内存完全够用了，开几个 PHPStorm，Chrome 开十多二十个标签页，Docker 内存直接拉到 3GB，还剩余比较多的内存，界面操作也不卡了

Nginx 配置反向代理 add_header 不生效的原因及解决办法

• 作者: Chuwen
• 时间: 2021-04-30
• 分类: Nginx
• 评论

## 背景 因同事用 Hyperf 搭建的接口，然后用 Vue.js 写的前端去调用，出现跨域问题 ## 无效原因 > Nginx `add_header` 只对 `200,201,204,206,301,302,303,304,307` 这些状态码生效，对于 401 405 403 这些状态码是不生效的。 恰好我测试的时候就随便访问了个链接，返回的状态码是 **404** 的，结果一直刷新都不出来添加的 `header` ## 解决办法 在末尾加一个 `always` 即可，即： ```conf add_header Access-Control-Allow-Origin * always; ``` 此外还引出一个问题，就是如果你将 **Access-Control-Allow-Origin** 头的值设置为 `*`，那么前端进行请求时，不出意外的话浏览器控制台就会提示这个错误：  > Access to XMLHttpRequest at 'http://api.xxxxxxx.com/v1/userinfo 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. > > **机翻成中文：** > > 通过CORS策略已阻止从来源 “http://localhost:8080” 访问 “http://api.xxxxxxx.com/v1/userinfo” 处的XMLHttpRequest：对预检请求的响应未通过访问 控制检查：当请求的凭据模式为“包括”时，响应中“访问控制允许-来源”标头的值不得为通配符“ *”。 XMLHttpRequest 发起的请求的凭据模式由 withCredentials 属性控制。 > > 相关链接：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials ### 原因是：当前端(如 axios)配置 `withCredentials=true` 时, 后端配置 `Access-Control-Allow-Origin` 不能为 `*`, 必须是相应地址 ### axios 设置 withCredentials 为 false ```js // axios配置 axios.defaults.withCredentials = false; // 携带cookie ``` --- 更多相关跨于问题，这篇文章可以作参考：https://juejin.cn/post/6844903748288905224 以下是从上述链接渣摘抄 ### 问题 1 > 解决方案：当前端配置withCredentials=true时, 后端配置Access-Control-Allow-Origin不能为*, 必须是相应地址 ``` Access to XMLHttpRequest at 'http://127.0.0.1:8081/getInfo?t=1545900042823' 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. ``` ### 问题 2 > 解决方案：当配置withCredentials=true时, 后端需配置Access-Control-Allow-Credentials ``` Access to XMLHttpRequest at 'http://127.0.0.1:8081/getInfo?t=1545899934853' 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-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. ``` ### 问题 3 > 解决方案：当前端配置请求头时, 后端需要配置Access-Control-Allow-Headers为对应的请求头集合 ``` Access to XMLHttpRequest at 'http://127.0.0.1:8081/getInfo?t=1545898876243' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response. ```

Git 文件内容没有变更但 status 显示有修改的解决办法

• 作者: Chuwen
• 时间: 2021-04-24
• 分类: Linux
• 评论

网上查到的原因是文件权限变更了，导致**显示有修改** ## 解决办法 > 不让 git 检测文件权限的区别 执行以下命令即可解决 ```shell git config core.filemode false ```

记录一次 box-shadow 和 border-radius 搭配遇到的一些小问题

• 作者: Chuwen
• 时间: 2021-04-17
• 分类: HTML5
• 评论

## 当时代码结构 > 预想效果是，鼠标移动到卡片，四周出现阴影 > 用 `box-shadow` 替代 `border`，因为用了 `border` 会导致容器宽度变化 ```html <div class="card"> <div class="item"> 这是内容 </div> <div class="item"> 这是内容 </div> <div class="item"> 这是内容 </div> </div> <style> .card .item { height: 40px; width: 40px; padding: 2rem; margin: 1rem; } .card .item:hover { box-shadow: 1px 1px #e1e3e5, -1px -1px #e1e3e5; border-radius: 0.3rem; } </style> ``` 预览效果： > 边缘出现了缺角，显然不能达到想要的预期  --- ### 最后再次阅读 MDN 的 box-shadow 文档，再次尝试，改为以下代码就实现了 ```html <div class="card"> <div class="item"> 这是内容 </div> <div class="item"> 这是内容 </div> <div class="item"> 这是内容 </div> </div> <style> .card .item { height: 40px; width: 40px; padding: 2rem; margin: 1rem; } .card .item:hover { box-shadow: #e1e3e5 0 0 0 1px; border-radius: 0.3rem; } </style> ``` 效果： 

解决 Ant Design For Vue 报 Antd is not defined 错误

• 作者: Chuwen
• 时间: 2021-04-12
• 分类: Vue.js,JavaScript
• 评论

## 解决办法 ```js import Vue from 'vue' // 将 import Antd from 'ant-design-vue' 改成如下即可 import Antd from 'ant-design-vue/es' Vue.use(Antd) ```