curl 上手指南,前端實用工具

點擊上方  前端Q ，關注公眾號

回復 加群 ，加入前端Q技術交流群

作者：螞小蟻

原文：https://juejin.cn/post/7236009756530966587

除了npm run dev、npm start、npm run build、node -v，前端一般很少使用命令行，更是很少使用到linux命令，除非涉及到一些部署的工作。但是要成為更資深的前端，必須深度了解服務器，了解一些常用命令，并且能夠使用這些命令解決一些實際問題。curl就是其中的一個，它的功能非常強大，強大到我廢寢忘食只為熟練使用；

curl是什么

講了半天，curl到底是什么呢？

curl是一個利用URL在命令行工作的文件傳輸工具，并不是所有的linux系統(tǒng)中都會自帶curl命令，例如簡潔版的Linux系統(tǒng)就可能并不存在，只需通過執(zhí)行“yum install curl”命令安裝即可

注意curl的核心還是在于下載文件，比如說我們的linux系統(tǒng)一般用yum或者apt-get去下載安裝包，但是在unix系統(tǒng)中自帶的就是curl，它們都是相似的一類工具

curl的功能

• 支持各種協(xié)議

  curl不僅支持http協(xié)議，還支持各種協(xié)議的鏈接，例如ftp、dict，或者需要通過ssh登錄的sftp服務以及ipv6地址

• 支持發(fā)送range請求，比如請求html的前100個字節(jié)：curl -r 0-99 https://www.baidu.com

• 發(fā)送restful接口請求：

      
      // 默認發(fā)送GET請求
curl https://www.baidu.com

// 發(fā)送POST請求
curl -d "" https://www.baidu.com

// 發(fā)送PUT請求
curl -X PUT https://www.baidu.com

// 發(fā)送DELETE請求
curl -X DELETE https://www.baidu.com

    

• 偽造referrer繞過referrer與host檢測：curl -e www.baidu.com https://www.baidu.com
• 攜帶cookie：curl -b "abc=1" https://www.baidu.com
• 下載時默認展示進度下載速度
• 限速下載，一般如果下載一個大文件不想讓他占用過多帶寬時可以使用curl --limit-rate 1K https://www.baidu.com

實戰(zhàn)一：故障排查

有時候線上突然出故障了，一般都是先把鍋甩到前端，很多人認為頁面是前端做的，那么頁面掛了那就是前端的鍋；在這個過程中我們可以先在瀏覽器的NetWork面板去分析頁面請求，但是這個時候請求返回的一般也就是404或者500，沒有什么有效的信息能夠幫助我們確定到底是誰的問題；

這個時候curl派上用場了，curl可以輸出通信的整個過程甚至是二進制文件，比方說要輸出一個請求通信的整個過程可以這樣寫：curl -v https://www.baidu.com

截屏2023-05-18 22.23.30.png

可以看到整個過程包含了DNS解析、使用協(xié)議和證書、TLS握手、響應頭響應內容；DNS解析階段一般不會有什么問題；TLS握手階段有可能有證書過期的情況，這個時候頁面會彈出不安全的警告，讓用戶誤以為頁面崩了，其實重新配置一下證書就可以迎刃而解了；響應頭響應內容則可以反映本次請求是否成功，排除了以上步驟的問題之后；還要注意到域名對應的服務器IP地址，根據(jù)這個地址就可以去對應的服務器查找問題的根源；

針對404而言：第一種情況就是nginx服務器沒有配置轉發(fā)或者轉發(fā)條件不正確導致找不到頁面資源；第二種情況是頁面確實不存在，比如說沒有對應的前端路由；所以一般都需要寫一個兜底的路由，在nginx上也需要配置一個兜底的資源，這樣即使找不到也不會出現(xiàn)404頁面影響體驗；

針對500而言：一般可能是nginx服務掛了，500一般都是服務問題

實戰(zhàn)二：iconfont自動下載

不知道各位前端有沒有這樣的困擾：每一次更新iconfont都需要下載整個文件壓縮然后去覆蓋原文件，最后再刪掉一些不需要的文件；這個過程雖然也不是很麻煩，但是就像是搬磚一樣很枯燥；所以就想著有沒有一種便捷的方式，直接運行一個腳本就把iconfont處理好了，那么這里就需要用到curl了

這就是iconfont的界面，首先項目中的font-family不一定是默認的iconfont，所以可以在項目設置里提前把它設置為和項目相同的名稱；

截屏2023-05-19 21.33.26.png 截屏2023-05-19 21.34.50.png

接下來打開控制臺然后點擊下載至本地，這個時候會產生一個下載的請求，如下圖：

截屏2023-05-19 21.37.01.png

然后聚焦到這個請求上右鍵copy ---> copy as curl，得到下面這一串命令：

截屏2023-05-22 22.04.19.png

到了這里下載的主要部分就大功告成了；接下來需要壓縮文件以及處理文件；首先需要壓縮文件，壓縮文件可以使用tar，這個命令在linux中很常用，它的參數(shù)比較多，但是只需要記住壓縮和解壓這幾個命令就夠了；解壓是tar -zxvf，壓縮是tar -zcvf，在下載之后將壓縮文件進行解壓：tar -zxvf ./test.zip -C ./iconfont ；本來是想將所有文件壓縮到iconfont文件夾，但是iconfont里面還有一級目錄；趕緊Google搜索一頓，用什么關鍵詞搜索呢？就決定是：“tar解壓縮忽略文件目錄”，得到搜索結果：--strip-components 1。它表示忽略1級文件目錄，如果里面的文件有多少級就填多少；

接下來處理多余的文件：刪除壓縮文件，刪除不需要的demo文件：rm -rf ./test.zip rm -rf ./iconfont/demo_index.html rm -rf ./iconfont/demo.css

最后擺個pose表示大功告成：echo "iconfont下載完成"，是不是可以早5分鐘下班了？

整個過程的代碼命名為download.iconfont.sh：

      
      #!/bin/bash

echo "開始下載iconfont..."
curl --output ./test.zip 'https://www.iconfont.cn/api/project/download.zip' \
  -H 'authority: www.iconfont.cn' \
  -H 'pragma: no-cache' \
  -H 'cache-control: no-cache' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'upgrade-insecure-requests: 1' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36' \
  -H 'accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9' \
  -H 'sec-fetch-site: same-orign' \
  -H 'sec-fetch-mode: navigate' \
  -H 'sec-fetch-user: ?1' \
  -H 'sec-fetch-dest: document' \
  -H 'referer: https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.13&manage_type=myprojects&projectId=1338367' \
  -H 'accept-language: zh-CN,zh;q=0.9' \
  -H 'cookie: xxx' \
  --compressed

tar -zxvf ./test.zip --strip-components 1  -C ./iconfont 
rm -rf ./iconfont/demo_index.html
rm -rf ./iconfont/demo.css
rm -rf ./test.zip
echo "iconfont下載完成"

    

創(chuàng)建測試數(shù)據(jù)

除了以上兩個案例之外，curl還可以用來創(chuàng)建測試環(huán)境數(shù)據(jù)：在進行開發(fā)的時候往往需要提前創(chuàng)建一些測試數(shù)據(jù)，而創(chuàng)建整個流程的測試數(shù)據(jù)比較耗時。借助curl，可以把創(chuàng)建過程中的接口請求拷貝下來，在創(chuàng)建測試數(shù)據(jù)時只需要修改一些參數(shù)就可以輕松創(chuàng)建多個測試數(shù)據(jù)，效率倍增！

后記

回顧一下，本文主要從以下方面講解了curl：

• curl是一個利用URL在命令行工作的文件傳輸工具
• curl可以發(fā)送各種請求，支持各種協(xié)議，還能進行限速請求
• curl可以用來做故障排查以及iconfont自動下載，創(chuàng)建測試數(shù)據(jù)

通過這些學習相信大家至少可以提前10分鐘下班了~~~別走，還有加餐。

針對第二個實戰(zhàn)，可以發(fā)現(xiàn)代碼量還是很大的，本著代碼簡化的原則，可以把它改成這樣：

      
       #!/bin/bash

    echo "開始下載iconfont..."
    curl --output ./test.zip 'https://www.iconfont.cn/api/project/download.zip?pid=xxxx&ctoken=xxxxx'
      -b 'xxxx' \
      --compressed

    tar -zxvf ./test.zip --strip-components 1  -C ./iconfont 
    rm -rf ./iconfont/demo_index.html
    rm -rf ./iconfont/demo.css
    rm -rf ./test.zip
    echo "iconfont下載完成"
    

    

題外話：筆者其實用Windows在這一步徘徊了很久，一直都是先打印出“iconfont下載完成”再出現(xiàn)的下載進度，后來才切換到瀏覽器提供的標準的curl請求上成功完成了iconfont下載，其具體的場景在Mac上也無法復現(xiàn)，不知為何,大家可以一起討論一下

最后提一句：如果在Mac上是可以使用這個命令來進行解壓：unzip -o -j -d ./iconfont ./test.zip，Mac系統(tǒng)是基于Unix內核的圖形化操作系統(tǒng)，因此有很多unix提供的命令，然而這一些命令在Windows、Linux上不一定有，所以還是采用了Linux上支持的tar命令來進行解壓

往期推薦

前端中 JS 發(fā)起的請求可以暫停嗎？
spa 如何達到ssr 的秒開技術方案——預渲染
仿義務購App（Vue3+Pinia+Koa+Three.js 全棧項目）

最后

• 歡迎加我微信，拉你進技術群，長期交流學習...
  

• 歡迎關注「前端Q」,認真學前端，做個專業(yè)的技術人...

點個在看支持我吧