如何在使用Let’s Encrypt + Nginx 重定向的情況下避免CORS問題?

用Fetch抓取和傳輸資料雖然很方便,也遇上CORS問題的時侯就笑不出來了。查資料加上除錯了一整晚,最後終於知道要如何在API 使用Let’s Encrypt重定向的時侯到底要怎樣避免CORS問題。

首先,要在後端程式加上Access-Control-Allow-Origin的Header。這應該大家都知道了,但還是提醒一下這個是基礎第一步喔。以PHP為例子:

header("Access-Control-Allow-Origin: *");

之後你可能會發現:咦?為什麼我設定了Access-Control-Allow-Origin,還是會出現同樣的問題呢?原因非常簡單:CORS不接受2xx以外的Staus Code回應!

用Fetch POST JSON時,瀏覽器會先發出OPTION的請求。這時Nginx如果不好好處理,就會給出405回應,導致問題發生。

所以我們要在Nginx的設定裡加上這個:

location / {  
    if ($request_method = 'OPTIONS') {
        return 204;
    }
} 

重啟Nginx後就能解決問題了。

順便提醒一下,前端的Code也需要注意在CROS模式下Fetch的時侯不能帶Header,否則一樣會出現問題喔。嚶嚶嚶。

  fetch(apiUrl, {
      body:JSON.stringify({
        width: 500,
        height: 300,
        imageUrl: imgUrl,
      }),
      mode: 'cors',
      method: 'POST',
    })

鳴謝Front-End Developers Taiwan翁傳翔林坤南先生指出文中問題!

如何讓遠端伺服器使用自己電腦上的SSH Key?

習慣用Git在伺服器上部署網站後,已經不想再用FTP或者SFTP這麼老套的方法來做事了。

不過如果想用SSH的方法訪問Git,很多時侯我們需要先為伺服器準備獨立的KEY,這樣實在有點麻煩。其實最好的方法是使用SSH Agent Forwarding讓遠端伺服器也能使用你電腦原來的金鑰,做法也非常簡單。

首先,新建/修改你電腦上的~/.ssh/config檔案 ,新增以下內容:

Host your_server
HostName server.com
user root
ForwardAgent yes

Host是你設定的伺服器名稱,請隨意修改。HostName則是你的伺服器網址/IP,user是指定的伺服器用戶,至於ForwardAgent就是本次的重點,請務必設定為yes。

完成後,輸入以下指令檢查目前Agent是否正使用你的Key:

ssh-add -L

否則輸入指令:

ssh-add -K

完成後再次登入你的伺服器:(請使用之前設定的伺服器名稱登入,否則不會生效)

ssh your_server

想知道更多關於ForwardAgent的資料,可以查看以下參考網站:

SSH agent forwarding 的應用

Javascript 如何比對Object是否相同(Equal)

在沒有Key或者Id的情況下,比對Object真的是世界上最噁心的一件事情了。

最簡單的方法是這個:

const object1 = {"Name": "Hello"};
const object2 = {"Name": "Hello"};

if(JSON.stringify(object1) === JSON.stringify(object2)){
  return true;
}

很簡單對吧?然而世界沒有那麼美好。更多時侯你會遇到這種情況:

const object1 = {"Sex": "Girl", "Name": "Hello"};
const object2 = {"Name": "Hello", "Sex": "Girl"};

這種時侯用上一種方法是會Return False,失敗的。手寫排序Function是一種處理方法,但工時不足的情況下可以考慮用Sort Object這個模組解決問題:

https://github.com/doowb/sort-object
const sortObj = require('sort-object');
const object1 = sortObj({"Sex": "Girl", "Name": "Hello"});
const object2 = sortObj({"Name": "Hello", "Sex": "Girl"});

if(JSON.stringify(object1) === JSON.stringify(object2)){
  return true;
}

好了,輕鬆搞定。如果遇到更複雜的情況,需要深度比對的話,那就需要另一個名為Deep Equal的模組了。

https://github.com/substack/node-deep-equal
const sortObj = require('sort-object');
const equal = require('deep-equal');
const object1 = sortObj({"Sex": "Girl", "Name": "Hello"});
const object2 = sortObj({"Name": "Hello", "Sex": "Girl"});

if(equal(object1) === equal(object2)){
  return true;
}

過於依靠他人的模組是不好的事,但這是最簡單和最快的方法了。有空的時侯再研究一下怎麼手寫出同樣的功能吧!

◢▆▅▄▃崩╰(〒皿〒)╯潰▃▄▅▇◣

Mastodon Docker 更新版本教簡易教學

要用Docker架設Mastodon並不困難,要升級更加不難,但當初官方寫的教學文檔好像已經很久沒更新了,所以還是寫一寫吧。

要升級Docker版Mastodon,首先要進入你的Mastodon資料夾,運行以下指令:

cd <你的Mastodon資料夾路徑>
git fetch && git checkout <目前最新版本,例如v2.7.3>

Git Checkout能讓你的Mastodon代碼馬上更新到指定版本。但Docker裡的代碼並不會隨之更新,所以我們還需要用Docker Compose重建Image,最後重啟Container即可:

docker-compose build
docker-compose up -d

一般來說,到了這個步驟一切就已經大公告成。可是某些比較大型的更新需要更新資料庫或其他額外步驟,建議參閱Mastodon更新日誌裡的Upgrade notes。

https://github.com/tootsuite/mastodon/releases

WordPress get_posts() Function 排除特定分類的方法

WordPress 的get_posts() Function 對於Plugin或者Theme 開發者來說都很有用:相對上沒有WP_Query那麼複雜,但同樣支援WP_Query應有的功能。但是,Wordpress 的API文檔上好像沒有提到這點哪?

事實上,get_posts的參數是跟WP_Query共用的。也就是說,如果你想在使用get_posts()搜尋文章時排除特定分類,只要這樣就好了:

  $posts = get_posts(array(
    'category__not_in' => array(76), //此處必須為分類ID(TAG ID),不可使用SLUG
  ));

看,很簡單對吧?

不過,果然我還是比較喜歡Drupal …..

參考資料:

exclude category from get_posts?

停止Cisco AnyConnect Secure Mobility Client 開機時自動啟動的方法

Cisco AnyConnect Client每次當我打開Mac的時侯總會自己跳出來,偏偏因為工作因素又非裝不可,只好找點方法取消它了。

在網絡上查到的方法如下:

cd /Library/LaunchAgents
sudo rm com.cisco.anyconnect.*

原理是在LaunchAgents資料夾裡把Anyconnect的部份刪掉,理論上之後重新開機的時侯就不會再讓它跳出來了。

好一個令人頭疼的軟體。

參考資料:

Stop Cisco AnyConnect Secure Mobility Client from starting up automatically

Liquidsky倒了怎麼辦?來自架雲端遊戲PC吧

之前我曾經寫過一篇文章教大家怎樣用LiquidSky來在Mac上玩遊戲,但非常不幸地Liquidsky突然宣告關閉,從此我們就失去了如今世上唯一支援亞洲地區的雲端遊戲服務,只剩下貴得嚇死人的Parsec + AWS方案可以用。

但真的這樣就完了嗎?不!為了節省開支的同時維持原來的雲端遊戲習慣,我做了非常多研究,到最後得出的結論是--只要用Google Cloud,一切還是有可能的!為什麼偏偏是它呢?

使用Google Cloud有以下幾個優點:

  1. 註冊後會贈送為期1年的300美元免費限額,在這段期間可以無限任玩。

2.   允許自訂虛擬機器的配置。你可以按照自己的遊戲需求訂制雲端電腦,不必像AWS那樣必須使用它準備好的機器,增加開支。

3. 顯卡效能比AWS好。(畢竟可是Tesla P100啊)

4. 支援台灣地區(這個最重要!)

玩雲端遊戲時如果伺服器跟客戶端不處於同一/鄰近地區,延遲將會讓遊戲體驗大打折扣,這樣一點都無法體驗到好處。所以Google Cloud支援台灣地區這點,可是說是它最大的優勢。

關於如何註冊Google Cloud Platform將不多解釋,詳情可以參考以下文章:

谷歌免费一年vps:Google Cloud Platform

首先,打開Google Cloud Compute Engine,建立虛擬機器,區域選擇asia-east1(台灣)的asia-east1-a或asia-east1-c,因為a區的GPU只有K80可以選擇。以下是我的雲端遊戲機器規格,各位可以按照自己需要作出調整,但筆者推薦使用Windows Data Center 2016,最少有100GB SSD,4 vCPU和8GB 記憶體的機器,否則遊玩時容易出現卡頓情況,影響遊戲體驗。另外Tesla P100是GPU的最低配備,K80雖然便宜但並不適合遊戲。

設定虛擬機完畢後,點擊管理並勾選先佔狀態。先佔伺服器只能維持24小時,但我們一般不需要長時間運行遊戲伺服器,只要每次關機前建立快照保存狀態即可,因此使用先佔能為我們減省不少開支。

完成後,我們還需要設定防火牆規則。Google Cloud預設的網絡支持透過RDP連線至Windows伺服器,但那並不能滿足我們的遊戲需求,只能作系統管理之用。之前在介紹Liquidsky時提過的Parsec遙控軟體,才足以應付一切。所以,我們要在選單=>VPC網絡=>防火牆規則裡新增一條規則:允許所有UDP輸入。詳細參照以下圖片:

如此一來,你的VM就基本設定完成了。但是等一等!這麼簡單就解決了嗎?答案當然是「NO」!

我們必須透過RDP連接至伺服器,安裝顯示卡驅動程式,音效驅動程式,Parsec,建立登入帳戶才算得上是完成一切。Mac可以在App Store取得Windows Remote Desktop Client,Windows的話本身已經自帶客戶端,無需額外安裝。

RDP的使用方法請參照微軟官方的Remote Desktop教學:

https://support.microsoft.com/zh-tw/help/17463/windows-7-connect-to-another-computer-remote-desktop-connection

各種驅動程式可至此處取得:

Nvidia GRID video driver: http://zuikaku.me/onlineDisk/downfile.php?id=a3d854f66c1b58865f6767ee834638b1d60ea878

Parsec: https://s3.amazonaws.com/parsec-build/package/parsec-windows.exe

VB-Cable virtual audio driver: http://vincent.burel.free.fr/VirtualAudioApps/VBCABLE_Driver_Pack43.zip

重新啟動後,右鍵工具列上的開始按鈕,選擇Computer Management ,選擇 Local Users & Groups ,右鍵User新增用於Parsec的Windows帳號,輸入帳號及密碼後選擇Password never expires,建立後到Group雙擊Administrators,將剛才新增的帳號加入到Administrators即可。

最後跟Liquidsky時一樣,在伺服器上啟動Parsec,再透過客戶端連線,登入,一切大公告成!

為什麼不能使用Google Cloud預設的帳號,要額外設置呢?原因是因為我們每次開始使用雲端機器前,必須先用RDP連接預設帳號並打開Parsec,這樣我們才能透過後者連接到伺服器。但由於Windows帳號不能被同時登入,一但預設帳號登出Parsec將無法運作,因此我們需要準備兩個帳號,新建立的帳號用來在Parsec上登入,才能避免這個情況發生。

最後的最後,記得設置RDP Session時間上限避免被自動登出喔!

Disable remote session timeout on Win Server 2012 R2

PhpSpreadsheet各種疑難排解

筆記一下。

問題1:Error: Call to undefined function PhpOffice\PhpSpreadsheet\Shared\mb_strlen()

安裝php-mbstring並啟用即可解決。

問題2:輸出檔案至php://output,卻遇到404 not found找不到檔案

安裝以下PHP Plugin即可解決:

php-zip, php-xml, php-md

使用之前要安裝的東西很多呢,這玩意兒。之後說不定還會繼續更新這篇文章的。

在專案裡局部運行Webpack的方法

webpack-cli是個好文明,但有時侯我們不想把它裝在系統裡,或者想要多個專案用不同版本的Webpack,這種時侯就需要讓它局部運行了。

方法非常簡單,只要直接呼叫webpack-cli的bin檔案即可。路徑如下:
./node_modules/webpack-cli/bin/cli.js

如果想方便一點,可以直接寫進scripts裡:

  "scripts": {
    "dev": "./node_modules/webpack-cli/bin/cli.js --mode development --env.NODE_ENV=development",
    "build": "./node_modules/webpack-cli/bin/cli.js --mode production --env.NODE_ENV=PRODUCTION"
  }```
  
  搞定。package.json萬歲。

Instgram API PHP Curl 出現SSL23 Error解決方法

其實再過沒多久Instgram API就不能再像現在這樣使用了,不過考慮到可能還會有些人像我這樣因為工作原因非用不可,分享一下這個的解決方法:

在用Setopt設定Curl的時侯,將CURLOPT_SSL_VERIFYPEER設定為FALSE:

    $curl = curl_init();
    curl_setopt_array($curl, array(
      CURLOPT_RETURNTRANSFER => 1,
      CURLOPT_URL => $api_url,
      CURLOPT_POST => 1,
      CURLOPT_SSL_VERIFYPEER => FALSE,
      CURLOPT_POSTFIELDS => $query,
    ));
    
    $result = curl_exec($curl);

如此一來,問題就應該解決了。意外地簡單,也意想不到啊……