小记一下，记录你的精彩代码片段和架构点滴 - 新手学习网

npm报错：request to https://registry.npm.taobao.org failed, reason certificate has expired

最新一个老项目,在使用 npm install 时, 总是报错：

npm报错：request to https://registry.npm.taobao.org failed, reason certificate has expired

很明显原因是淘宝镜像过期了！

通过npm config get registry 查询本地的npm镜像:

bash 复制代码

apple@AppledeMacBook-Pro h5 % npm config get registry                                              
https://registry.npmmirror.com/

发现明明已经切换到新的镜像了啊，为什么还是报错呢？

原因是项目本地的package-lock.json 文件导致的，删除即可。

Js如何判断div内容滚动元素滚动到底部

要判断div内容滚动到底部，可以监听div的滚动事件，并通过计算滚动条的位置和div的总高度来判断。

javascript 复制代码

// 假设你的div有一个id为'my-div'
const div = document.getElementById('my-div');
 
div.addEventListener('scroll', function() {
  // 当前滚动条的位置
  const scrollTop = this.scrollTop;
  // div的总高度，包括可见区域和隐藏的滚动内容
  const scrollHeight = this.scrollHeight;
  // div的可视区域高度
  const clientHeight = this.clientHeight;
 
  // 当滚动条位置加上可视区域高度大于总高度减去某个阈值时（可以自己定义这个阈值），
  // 可以认为内容滚动到将要滚动到底部
  const isScrollToBottom = scrollTop + clientHeight >= scrollHeight - 5; // 例如阈值为5px
 
  if (isScrollToBottom) {
    // 执行到达底部的操作
    console.log('滚动到底部了！');
  }
});

如何解决springboot中LocalDateTime 返回前端Object对象的问题

Mysql 数据库类型为datetime , Java Bean 为 LocalDateTime 类型，前端返回如下格式：

java 复制代码

createdAt": {
    "month": "JUNE",
    "year": 2024,
    "dayOfMonth": 21,
    "dayOfWeek": "FRIDAY",
    "dayOfYear": 173,
    "monthValue": 6,
    "hour": 9,
    "minute": 0,
    "nano": 0,
    "second": 0,
    "chronology": {
        "id": "ISO",
        "calendarType": "iso8601"
    }
}

解决方案1：将 LocalDateTime 改为Date类型。

解决方案2：手动指定JSON解析类型

java 复制代码

@JsonDeserialize(using = LocalDateTimeDeserializer.class)
@JsonSerialize(using = LocalDateTimeSerializer.class)
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone =  "GMT+8")
@TableField(value = "created_at",fill = FieldFill.INSERT)
private LocalDateTime createdAt;


@JsonDeserialize(using = LocalDateTimeDeserializer.class)
@JsonSerialize(using = LocalDateTimeSerializer.class)
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone =  "GMT+8")
@TableField(value = "updated_at",fill = FieldFill.UPDATE)
private LocalDateTime updatedAt;

java.lang.IllegalArgumentException: When allowCredentials is true, allowedOrigins cannot contain the special value "*"since that cannot be set on the "Access-Control-Allow-Origin" response header. To allow credentials to a set of origins, list them explicitly or consider using "allowedOriginPatterns" instead.

具体区别如下：

java 复制代码

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //corsConfiguration.addAllowedOrigin("*"); // 2.4 以下
        //2.4以上要使用 addAllowedOriginPattern
        corsConfiguration.addAllowedOriginPattern("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setMaxAge(1800L);
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

即当setAllowCredentials 为true 时，必须显式设置 addAllowedOrigin

window.open()跳转页面在苹果系统iOS下失效问题

window.open() 一个很简单的api，在移动端H5页面下使用，却有兼容性问题。
PC端没有问题，不管是Android还是iOS，都可以正常跳转。
但是移动端，iOS系统下，window.open() 跳转点击没有反应。可以针对性判断一下：

javascript 复制代码

// iOS下拦截 window.open的问题
export function windowOpenUtils(url:string){
  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
    setTimeout(()=>{
      window.location.href = url
    })
   
  }else{
    setTimeout(()=>{
      window.open(url, '_blank')
    })
  }
  return
}

pnpm 设置最新的阿里云镜像

根据最新的信息，淘宝npm 镜像的地址已更新为https://registry.npmmirror.com/

设置pnpm使用国内镜像源的步骤如下：

bash 复制代码

# 查询当前使用的镜像源
pnpm get registry

# 设置为淘宝镜像源
pnpm config set registry https://registry.npmmirror.com/

# 还原为官方镜像源
pnpm config set registry https://registry.npmjs.org/

通过以下命令可以验证pnpm是否成功切换到指定的镜像源：

bash 复制代码

pnpm get registry

如果输出的地址是设置的国内镜像源地址，则表示设置成功。

axios的withCredentials到底是什么意思？

通常我们使用以下代码创建一个axios实例。

javascript 复制代码

const axiosInstance = axios.create({
  baseURL:import.meta.env.AXIOS_BASE_URL as string,
  withCredentials: true,
  timeout: 55000,
});

那上述代码中的withCredentials 是什么意思呢？

withCredentials 是 XMLHttpRequest 对象的一个属性。

axios也是XMLHttpRequest的封装，当然最新的axios版本底层也支持fetch了。

withCredentials用于指示是否应该允许跨域请求携带凭据（如Cookies、HTTP认证信息、客户端SSL证明等）。当设置为 true 时，它允许跨域请求发送凭据，但同时也要求服务器端必须正确响应CORS（跨源资源共享）策略。

详解 withCredentials：

1. 默认值：withCredentials 的默认值是 false。

这意味着，除非显式设置为 true，否则跨域请求不会携带凭据。

当你设置 XMLHttpRequest 的 withCredentials 属性为 true 时，你告诉浏览器在发送跨域请求时携带凭据。例如：

javascript 复制代码

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

2. 服务器端响应：

当 withCredentials 设置为 true 时，服务器必须在其CORS响应头中包含 Access-Control-Allow-Credentials: true，以允许浏览器接受带有凭据的请求。同时，Access-Control-Allow-Origin 不能设置为通配符 *，而必须指定明确的源。

3. 安全性考虑：

允许跨域请求携带凭据可能会带来安全风险，因为它允许第三方网站访问敏感的用户数据。因此，只有当你完全信任目标源，并且需要在请求中包含用户凭据时，才应该将 withCredentials 设置为 true。

4. 现代浏览器和Fetch API：
在现代浏览器中，fetch API 也支持跨域请求。当使用 fetch 发起跨域请求时，可以通过设置 credentials: 'include' 来达到与 XMLHttpRequest 中 withCredentials: true 相同的效果。

七牛云前端表单直传文件提示Access-Control-Allow-Origin跨域如何解决？

使用过七牛云的小伙伴都知道，七牛云支持前端通过表单直传，只需要一个token即可。

通过如果我们使用 element plus 等UI框架自带的上传组件，只需简单配置 action、data 或 header等属性即可，框架自动帮我们进行上传。

但是如果需要自定义一个文件上传组件，有可能会提示跨域。
例如，我们可以使用axios进行自定义上传:

javascript 复制代码

const axiosInstance = axios.create({
  // 问题就在这里
  withCredentials: true
  timeout: 150000,
});

const uploadFile: RequstType = async (url, params) => {
  const config = {
    headers: { "Content-Type": "multipart/form-data" },
  };
  return await axiosInstance.post(url, params,config);
};
const fd = new FormData();
// 选择的文件
fd.append("file", file);
// 后端返回的上传凭证
fd.append("token", "token");
uploadFile("https://upload.qiniup.com/",fd)

错误解读

上述代码看似没有问题，但是就是会提示跨域。

我们分析以下报错的提示：

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.

错误信息的意思是：

Preflight request：这是一个预检请求，浏览器在发送实际请求之前，会先发送一个 OPTIONS 请求，以确定是否安全可以发送请求。

Access-Control-Allow-Origin header：这个响应头必须包含一个明确的允许访问的源，而不是通配符 *。

The request's credentials mode is 'include'：这意味着请求包含了凭据（如Cookies或HTTP认证信息），因此浏览器要求服务器明确允许来自你的源的请求。
The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute：这表明请求是通过 XMLHttpRequest 发起的(此处为axios)，并且 withCredentials 属性被设置为 true。

解决方案

很明显，我们无法对七牛云的服务端进行配置。那只能通过前端配置 withCredentials 即可.
修改代码如下：

javascript 复制代码

const uploadFile: RequstType = async (url, params) => {
  const config = {
    headers: { "Content-Type": "multipart/form-data" },
    // 不携带cookie即可
    withCredentials: false
  };
  return await axiosInstance.post(url, params,config);
};

如何解决css 使用flex垂直居中后子元素之间的间距太大的问题

如果你在使用 flexbox 垂直居中后，发现子元素之间的间距太大，可能是因为设置了不正确的 align-content 值。

align-content 与 align-items 的区别在于，align-items 是在单行容器中控制交叉轴上的对齐，而 align-content 是在有多行的容器中控制交叉轴上的对齐。

解决方法：

确保你已经正确地使用了 display: flex 和 flex-wrap: wrap 属性，使得容器内的项在必要时能够换行。

使用合适的 align-content 值来减小行间间距。常用的值包括：

flex-start：行之间的间距为 0，行与容器顶部对齐。
flex-end：行之间的间距为 0，行与容器底部对齐。
center：行之间的间距为 0，行在容器中居中。
space-between：行之间的间距相等，第一行在容器顶部，最后一行在容器底部。
space-around：每行周围的间距相等，因此行之间的间距是行周围间距的两倍。

-** stretch：默认值。行之间的间距为 0，行被拉伸以填满容器的交叉轴**。

如果需要更精细的控制，还是可以使用具体的数值或百分比来设置行间距。

html 复制代码

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around; /* 调整这个值来改变间距 */
}
 
.item {
  /* 定义项的样式 */
}

vue-router使用push调整后如何强制刷新页面？

在使用vue-router时，有时候，我们希望router.push跳转页面后，立即执行一些动作，比如强制刷新。
该如何处理呢？$router.push返回一个Promise对象，你可以在.then()方法中执行跳转成功之后的操作，在.catch()方法中处理可能出现的错误。

javascript 复制代码

router.push('/path').then(() => {
  // 在这里执行你想要的操作
  window.location.reload()
  console.log('路由跳转成功')
}).catch(err => {
  // 在这里处理路由跳转的错误
  console.log('路由跳转出错:', err)
})

< prev 3 / 4 more >

npm报错：request to https://registry.npm.taobao.org failed, reason certificate has expired

Js如何判断div内容滚动元素滚动到底部

如何解决springboot中LocalDateTime 返回前端Object对象的问题

SpringBoot 升级到2.4.0以上版本时跨域报错

window.open()跳转页面在苹果系统iOS下失效问题

pnpm 设置最新的阿里云镜像

axios的withCredentials到底是什么意思？

七牛云前端表单直传文件提示Access-Control-Allow-Origin跨域如何解决？

错误解读

解决方案

如何解决css 使用flex垂直居中后子元素之间的间距太大的问题

vue-router使用push调整后如何强制刷新页面？