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

Windows 系统安装gcc, Using GCC with MinGW

因为Rust默认使用的C语言依赖Visual Studio，但该工具占用空间大安装也较为麻烦，可以选用轻便的mingw64包。

可以通过一下方式安装：
(1) 下载地址1-GitHub：Releases · niXman/mingw-builds-binaries · GitHub
(2) 下载地址2-WinLibs：WinLibs - GCC+MinGW-w64 compiler for Windows
(3) Installing the MinGW-w64 toolchain: https://code.visualstudio.com/docs/cpp/config-mingw#_installing-the-mingww64-toolchain

推荐通过第三种方式。

安装完成后记得设置环境变量。

如何在线查看mp4视频的编码格式，是否为iOS兼容的h264格式

记录一下，可以在线查询mp4编码格式的网站：

https://gpac.github.io/mp4box.js/test/filereader.html

通常H264的格式的文件编码信息如下：

Movie Info

File Size / Bitrate： 0 bytes / 0 kbps
Duration / Timescale： 220845/1000 (0:03:40.845)
Brands (major/compatible)： isom,isom,iso2,avc1,mp41
MIME： video/mp4; codecs="avc1.42c01f,mp4a.40.2"; profiles="isom,iso2,avc1,mp41"
Progressive： false
Fragmented： false
MPEG-4 IOD： false

重点查看MIME类型是否为video/mp4，是否包含avc信息。且 Progressive/Fragmented/MPEG-4 IOD 三个参数为false。

另外iOS支持的编码格式可以通过官方查看：
https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html

What are the specifics of the video and audio formats supported?
Although the protocol specification does not limit the video and audio formats, the current Apple implementation supports the following formats:

Video:
H.264 Baseline Level 3.0, Baseline Level 3.1, Main Level 3.1, and High Profile Level 4.1.
Audio:
HE-AAC or AAC-LC up to 48 kHz, stereo audio
MP3 (MPEG-1 Audio Layer 3) 8 kHz to 48 kHz, stereo audio
AC-3 (for Apple TV, in pass-through mode only)

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;

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

SpringBoot 升级到2.4.0以上版本时跨域报错，具体错误是：

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);
};

< prev 3 / 5 more >