Carbon IFrame 出現 carbon.now.sh 拒絕連線原因分析與 Carbon 架設教學

心得

這幾天在看以前舊的文章的時候突然出現下面這張圖:

真是嚇死我了,想說以前不是正常的嗎?為什麼突然會被 carbon 拒絕連線呢?因此還特別看了一下 carbon 網站是不是正常,結果看一下很正常,那只能開始來 debug 了,下面就來教大家如果遇到這種情況應該怎麼 debug 拉 ~

第一步先打開開發者工具看看

打開馬上看到兩個錯誤,這邊寫說 “in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.”,意思是說僅允許同源請求。什麼是同源請求呢?就是必須與來源頁面的「協定」、「網域」、「連接埠」都相同,才能進行。

而我們的網址是 https://blog.clarence.tw,iframe 的網址是 https://carbon.now.sh,協定相同、網域不同、連接埠相同,所以會出現錯誤。

架設 carbon

那這樣怎麼辦呢?站長就想說那就自己架吧 XD ~
官方文件沒有寫怎麼架,所以弄超久 QQ …
不過沒關係站長就來教大家怎麼架吧 ~

首先先把整個專案 clone 下來吧 https://github.com/dawnlabs/carbon,之後就使用下面的指令就可以把服務啟動了,預設 port 是 3000,可以直接用 http://localhost:3000 開啟服務

如果需要改變開啟的 port 就修改 package.json 的 “start”: “next start -p 8080″,如下:

原始 Carbon 是用 now 架設的所以需要來看看它的設定檔 https://github.com/dawnlabs/carbon/blob/master/now.json,而文件在 https://zeit.co/docs/v2/deployments/routes/,系統一定要放在 NGINX 之類的 Proxy 後面,因為需要用到 https://localhost/embed/,沒設定就會出現下圖:

那這邊就來跟大家說 Nginx 要怎麼設定,其實也只要複製貼上就好 XD ~ 站長都幫大家寫好了,應該是沒有寫錯拉 ~ 如果有錯可以在下方留言跟站長說。

這邊要注意的是 server_name 記得改成自己的 Domain,X-Frame-Options 與Content-Security-Policy 改成需要 iframe 的網站,基本上就是這樣拉 ~
至於 X-Frame-Options 與 Content-Security-Policy 代表什麼意思,有機會再發文跟大家說 ~

參考資料: