Gowhich

Durban's Blog

发表于 分类于

nginx跨域请求配置

同域名，如果相互访问其子域名的时候，比如h5.xx.com要访问api.xx.com，如果在h5.xx.com页面中访问api.xx.com的话，就会遇到跨域的问题

解决办法，在代码端也是可以解决的

通过设置

  1. Access-Control-Allow-Origin
  2. Access-Control-Allow-Headers
  3. Access-Control-Allow-Methods

不过今天这里要说的是在nginx层面做处理

在conf中添加如下配置

1
2
3
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

发表于 分类于

不知道其他的类似axios库有没有这个情况，我用的也少，基本很少用，不过其他的库也确实遇到的比较少，这里遇到这个问题记录下解决办法

如果你的代码是下面这个情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var data = {
  'id': 1,
  'name': 'minmin',
  'age': 23
}

axios({
  method: 'POST',
  url: 'http://xx.xxx.xxx',
  data: data,
}).then(function(res){
  console.log(res);
}).catch(function(err){
  console.log(err);
});

请换成如下的情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var data = new URLSearchParams();
data.append('id', '1');
data.append('name', 'minmin');
data.append('age', '23')

axios({
  method: 'POST',
  url: 'http://xx.xxx.xxx',
  data: data,
}).then(function(res){
  console.log(res);
}).catch(function(err){
  console.log(err);
});

发表于 分类于

使用MySQL时如何精准查询慢SQL

在做技术开发的过程中，当产品在访问量很大的情况下，如果发现数据库cpu或者iops飙升，那么可以看看是不是有慢sql

但是慢sql如何查询，需要我们一个一个查吗，这个比较耗费人力成本

不如我推荐一个命令

1
select * from information_schema.processlist where COMMAND <> 'Sleep';

经过这样的查询就能累出所有运行中的sql，这个时候就可以看到哪个sql执行时间长了，

正常情况下我们会遇到类似如下的输出

1
2
3
4
5
+-----+------+-----------+------+---------+------+-----------+----------------------------------------------+
| ID  | USER | HOST      | DB   | COMMAND | TIME | STATE     | INFO                                         |
+-----+------+-----------+------+---------+------+-----------+----------------------------------------------+
| 106 | root | localhost | NULL | Query   |    0 | executing | select * from information_schema.processlist |
+-----+------+-----------+------+---------+------+-----------+----------------------------------------------+

我们可以通过TIME判断出哪条sql执行时间比较久

发表于 分类于

JavaScript全局异常监测

在写代码的过程中一直遇到一个问题，就是如何来监测异常代码的处理

如果在开发中，可以使用chrome dev tools来监测代码异常，并能时刻监测代码的异常部分

但是在代码上线之后，如果监测代码就比较麻烦

这里提供一个监测全局的代码，虽然也很多网站有关于类似代码的分享

这里主要是记录下，防止忘记，找起来麻烦，关键是这个代码是我自己经过测试使用，比较完善的一个，也许别人也有其他版本

但是我这个版本我保证是可以用的

只需要放在<script></script>标签里面就可以了，如果需要将异常的代码信息上传到服务器，可以自己修改下，将console.log部分改成数据请求的代码就可以了

代码如下

1
2
3
4
5
6
7
8
9
window.onerror = function(msg,url,l){
  txt="There was an error on this page.\n\n"
  txt+="Error: " + msg + "\n"
  txt+="URL: " + url + "\n"
  txt+="Line: " + l + "\n\n"
  txt+="Click OK to continue.\n\n"
  console.log(txt);
  return true
};

发表于 分类于

webapp端如何完美实现字符截取，常用的方式我们知道有substr，但是这种方式如果用在多种语言的情况下可能会有问题

比如英文字母和中文汉子混在一起的话，截取指定长度的字符串就有点困难了

下面是我实战中用到的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getByteByBinary(binaryCode) {
  /*
    二进制 Binary system,es6表示时以0b开头
    八进制 Octal number system,es5表示时以0开头,es6表示时以0o开头
    十进制 Decimal system
    十六进制 Hexadecimal,es5、es6表示时以0x开头
   */

  var byteLengthDatas = [0, 1, 2, 3, 4];
  var len = byteLengthDatas[Math.ceil(binaryCode.length / 8)];
  return len;
}

function getByteByHex(hexCode) {
  return getByteByBinary(parseInt(hexCode, 16).toString(2));
}

获取字符串长度函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function getByteLength(str) {
  var result = "";
  var flag = false;
  var len = 0;
  var length = 0;
  var length2 = 0;
  for (var i = 0; i < str.length; i++) {
    var code = str.codePointAt(i).toString(16);
    if (code.length > 4) {
      i++;
      if ((i + 1) < str.length) {
        flag = str.codePointAt(i + 1).toString(16) == "200d";
      }
    }

    if (flag) {
      len += getByteByHex(code);
      if (i == str.length - 1) {
        length += len;
      }
    } else {
      if (len != 0) {
        length += len;
        length += getByteByHex(code);
        len = 0;
        continue;
      }
      length += getByteByHex(code);
    }
  }
  return length;
}

经过上面几个函数的准备，下面这个函数，就完美实现了截取字符串长度的功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function substringByByte(str, maxLength) {
  var result = "";
  var flag = false;
  var len = 0;
  var length = 0;
  var length2 = 0;
  for (var i = 0; i < str.length; i++) {
    var code = str.codePointAt(i).toString(16);
    if (code.length > 4) {
      i++;
      if ((i + 1) < str.length) {
        flag = str.codePointAt(i + 1).toString(16) == "200d";
      }
    }
    if (flag) {
      len += getByteByHex(code);
      if (i == str.length - 1) {
        length += len;
        if (length <= maxLength) {
          result += str.substr(length2, i - length2 + 1);
        } else {
          break
        }
      }
    } else {
      if (len != 0) {
        length += len;
        length += getByteByHex(code);
        if (length <= maxLength) {
          result += str.substr(length2, i - length2 + 1);
          length2 = i + 1;
        } else {
          break
        }
        len = 0;
        continue;
      }
      length += getByteByHex(code);
      if (length <= maxLength) {
        if (code.length <= 4) {
          result += str[i]
        } else {
          result += str[i - 1] + str[i]
        }
        length2 = i + 1;
      } else {
        break
      }
    }
  }
  return result;
}

发表于 分类于

css能让图片转动起来，而且很简单，适用的场景包括音频是否在播放

如果视频播放的时候我们就让图片转圈，而且想转的快或者慢都可以加以控制。

代码示例如下

css code

1
2
3
4
5
6
7
8
9
10
11
12
@-webkit-keyframes rotation{
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}

.img-rotate{
  -webkit-transform: rotate(360deg);
  animation: rotation 1.4s linear infinite;
  -moz-animation: rotation 1.4s linear infinite;
  -webkit-animation: rotation 1.4s linear infinite;
  -o-animation: rotation 1.4s linear infinite;
}

html code

1
2
3
<div style='60px'>
  <img v-if='audioPlayStatus==true' class="img-rotate" src="https://xxxx.com/audio_start_play.png" style="width: 100%" />
</div>

发表于 分类于

试题是这样的

You have a list with website URLs with some mistakes — capital letters. Print the number of the list elements, fix the mistakes in each element of this list, make a map with the domains as key and the length of the respective URLs as value. Try to do it within the body of a proper scope function.
Note: Don’t print the whole map, only return it.

Sample Input 1:

1
htTpS://hypeRskIll.org HTTPS://www.jetbrains.com https://github.com

Sample Output 1:

1
2
3
{https://hyperskill.org=22, https://www.jetbrains.com=25, https://github.com=18}

Write a program in Kotlin

1
2
3
fun filterAndMatch() : Map<String, Int>{
    //write your code here
}

在【腾讯元宝】使用Hunyuan

腾讯元宝

在【豆包】直接使用AI编程

豆包

在【腾讯元宝】使用DeepSeek

腾讯元宝

最终选择

从答案的简洁上我会选择豆包给的答案，【腾讯元宝】Hunyuan模型给的答案，我个人不会采用，有点罗嗦，而且不符合出题的意思，【腾讯元宝】DeepSeek模型给的答案，比较周全，比如多了一个filter

最主要的问题【腾讯元宝】Hunyuan模型似乎没有理解题目的意思

从题目看第一步需要获取输入的内容，Hunyuan就创建了一个变量，这一点看出并没有理解题目的意思

发表于 分类于

移动端开发或者是浏览器都会遇到这个问题，尤其是最近几年ES6语法比较流行，很多浏览器也都支持了，但是很多用户并没有将浏览器更新到最新版本，这样就会遇到一个显示的问题，不支持ES6语法的不支持，如果是在开发中使用的打包工具的话，如webpack等，也许这个问题还要解决，在打包过程中使用babel工具，便可以自动的将需要的es6语法转译为es5语法，从而完美的解决兼容性，但是往往我们在开发的过程中，总是避免不了需要进行简单的页面开发，那么就没必要进行复杂的工具配置，比如webpack等的配置，因为开发前期还是比较费时间的。当然也有很多的工具都是现成的，只需要npm install一下，然后执行对应的命令就可以，连webpack都不需要进行配置，那么这个时候是不是还要进行安装，如果网络好的话，或许能立刻开工进行开发，但是网络不好估计半天的时间就没有了。所以我们看下如何在浏览器下进行兼容呢

有了这个库，也许会解决这个问题，至少我是这么干的，也许适合你，能够帮你解决es6中promise的问题

下面是ES6的项目地址 https://github.com/stefanpenner/es6-promise

Downloads

es6-promise 27.86 KB (7.33 KB gzipped) es6-promise-auto 27.78 KB (7.3 KB gzipped) - Automatically provides/replaces Promise if missing or broken. es6-promise-min 6.17 KB (2.4 KB gzipped) es6-promise-auto-min 6.19 KB (2.4 KB gzipped) - Minified version of es6-promise-auto above.

CDN

1
2
3
4
5
6
7
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script> 

<!-- Minified version of `es6-promise-auto` below. -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

说下实际情况下如何使用

将下面的代码放在所有js引入入口的最前面（或者按需来操作也行）

1
2
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

然后下面这种带有then语法的就能解决了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
axios.post('/api/activity/qrj/buy', {
  id: gift.img_id || gift.id || 0,
  user_star_autokid: autokid,
}).then(function (response) {
  // ...
}).catch(function (error) {
  // ...
});
html2canvas(document.querySelector("#canvas-container"), {
  dpi: window.devicePixelRatio,
  useCORS: true,
  width: window.document.body.offsetWidth,   //获取当前网页的宽度
  height: offsetHeight, //获取当前网页的高度
  windowWidth: document.body.scrollWidth,     //获取X方向滚动条内容
  windowHeight: windowHeight, //获取Y方向滚动条内容
  x: 0,
  y: offset,
}).then(function(canvas){
  // var urlBase64Data = canvas.toDataURL('image/webp', 0.8);
  // ...
}).catch(function(e){
  // ...
});

html2canvas兼容ES6的使用说明详见：https://www.javascripting.com/view/html2canvas

Polyfill(也许你需要)

我是没有找到具体的项目下载地址

唯一我找到能在浏览器中直接使用的源文件是在这里，版本可能会过期

你可以通过下面的安装命令获取到

1
npm install --save @babel/polyfill

然后在node_modules目录下面babel/polyfill/dist目录下面，即node_modules/@babel/polyfill/dist，一般会有两个文件

1
2
polyfill.js
polyfill.min.js

选择自己需要的就可以了。

发表于 分类于

iframe无边框示例，网上很多帖子其实只告诉了我们一部分

1
<iframe src="https://gowhich.com" id='other_ad' width="100%" height="568" scrolling="yes" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes" style="border:0"></iframe>

如果单单只是这一部分的话，是不起作用的（在某些情况下）

其实主要原因是部分浏览器默认的margin和padding并没有设置为0，实际上还需要加一些css style

1
2
3
4
5
6
7
8
9
10
<style>
  * {
    margin:0;
    padding:0;
  }

  html {
    font-size: 3.125vw;
  }
</style>

完整的示例代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
  <meta charset=UTF-8>
  <meta http-equiv=X-UA-Compatible>
  <meta name=format-detection content="telephone=no">
  <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <link rel="shortcut icon" href="yours">
  <title>小游戏</title>
</head>
<style>
  * {
    margin:0;
    padding:0;
  }

  html {
    font-size: 3.125vw;
  }
</style>
<body style="background:#270f48">
  <div id="app" v-cloak>
    <iframe src="https://gowhich.com" id='other_ad' width="100%" height="568" scrolling="yes" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes" style="border:0"></iframe>
  </div>
</body>
</html>

发表于 分类于

背景介绍

使用的是阿里云的服务器，最近报警了，提示我服务器有漏洞，要进行修复升级，然后看了下详情，给出的修复命令如下

1
2
3
yum update libcurl-devel
yum update libcurl
yum update curl

好吧，我能力低，我技术不行，承认自己，于是便执行了下，执行完之后，没有发现任何异常。

但是！我邮箱在不断的收到curl的报错异常，于是我检查代码，添加各种日志，依然没有发现具体是哪里的问题，于是开始猜测访问频次高的接口。

不测不知道一测发现了问题

在PHP中用curl调用的时候第一次是没有问题的，第二次就出现问题了

但是在命令行下面都是正常的

基本报错日志信息如下

错误信息1

1
2
3
4
5
6
7
8
* About to connect() to api.gowhich.com port 443 (#1)
*   Trying 10.252.117.104...
* Connected to api.gowhich.com (10.252.117.104) port 443 (#1)
* Initializing NSS with certpath: sql:/etc/pki/nssdb
* Unable to initialize NSS database
* Initializing NSS with certpath: none
* Unable to initialize NSS
* Closing connection 1

错误信息2

1
2
3
4
5
6
* Initializing NSS with certpath: none
* NSS error -5978 (PR_NOT_CONNECTED_ERROR)
* Network file descriptor is not connected
* Closing connection 0
int(35)
Network file descriptor is not connected

curl安装完之后的版本

1
curl -V

版本信息如下

1
2
3
curl 7.29.0 (x86_64-redhat-linux-gnu) libcurl/7.29.0 NSS/3.44 zlib/1.2.7 libidn/1.28 libssh2/1.8.0
Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtsp scp sftp smtp smtps telnet tftp
Features: AsynchDNS GSS-Negotiate IDN IPv6 Largefile NTLM NTLM_WB SSL libz unix-sockets

通过如下命令访问

1
curl -I -X GET -v https://api.gowhich.com

结果如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
* About to connect() to api.gowhich.com port 443 (#0)
*   Trying 10.252.117.104...
* Connected to api.gowhich.com (10.252.117.104) port 443 (#0)
* Initializing NSS with certpath: none
*   CAfile: /etc/pki/tls/certs/ca-bundle.crt
  CApath: none
* SSL connection using TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384
* Server certificate:
*       subject: CN=*.gowhich.com
*       start date: 8月 05 00:00:00 2019 GMT
*       expire date: 10月 03 12:00:00 2020 GMT
*       common name: *.gowhich.com
*       issuer: CN=RapidSSL RSA CA 2018,OU=www.digicert.com,O=DigiCert Inc,C=US
> GET / HTTP/1.1
> User-Agent: curl/7.29.0
> Host: api.gowhich.com
> Accept: */*
>
< HTTP/1.1 200 OK
HTTP/1.1 200 OK
< Server: nginx/1.6.3
Server: nginx/1.6.3
< Date: Tue, 18 Feb 2020 08:40:32 GMT
Date: Tue, 18 Feb 2020 08:40:32 GMT
< Content-Type: text/html; charset=utf-8
Content-Type: text/html; charset=utf-8
< Content-Length: 11
Content-Length: 11
< Connection: keep-alive
Connection: keep-alive
< ETag: W/"b-+mppjeYkbwpj8ck3uudlJA"
ETag: W/"b-+mppjeYkbwpj8ck3uudlJA"

<
* Excess found in a non pipelined read: excess = 11 url = / (zero-length body)
* Connection #0 to host api.gowhich.com left intact

通过上面的一系列问题，原因就是本机的php调用curl时出现了问题，我猜测时php不兼容nss版本的curl，但是我看过其他服务器使用确实是nss版本的curl，只不过nss的版本不同，

如果你是在命令行下执行php的话

可以通过加变量的方式，这个方法是网上查到的资料(命令如下)

1
export NSS_STRICT_NOFORK=DISABLED

如果要取消的话可以如下操作

1
export NSS_STRICT_NOFORK=1

或者

1
unset NSS_STRICT_NOFORK

但是文章上好像说 不建议在生产环境中使用

参考文章链接：https://cohan.dev/php-curl-libcurl-error-on-subsequent-requests/

但是我在webapp中要如何去设置这个参数，我还真不知道了。

最后的解决方案，替换nss版本的curl，改换成openssl版本的curl。

我下载的curl版本是 curl-7.27.0.tar.gz

然后下载一个与你php版本一致的包 我的是 php-7.0.6.tar.gz

(非root用户，但是有root权限的命令如下，如果是root的话，会有一些不同)

下载后分别解压下

1
tar -zxvf ***.tar.gz

先安装下curl

1
2
3
4
cd curl-7.27.0

./configure --without-nss --with-ssl
make && sudo make install

再安装php的curl

1
2
3
4
cd php-7.0.6/ext/curl
phpize
./configure --with-curl=/usr/local
make && sudo make install

安装完之后重启php-fpm

1
/etc/init.d/php-fpm restart

结果修复了。

0%