使用 Nginx 反向代理解決 Kintone 跨域問題

Photo by DJ Johnson on Unsplash

好久不見

好久沒有發文了，去年因為原本工作薪資不理想，去年透過轉職班順利轉職成為前端工程師，未來這裡的內容可能會以分享技術文章為主。

現在我是前端工程師，但因為公司人力精簡，所以我也會接觸一些部屬的東西，剛好我也不排斥，所以碰到了Nginx反向代理器。雖然理解過程有點痛苦，不過得到了新知識也有點成就感，就當作成長痛吧。有些東西對有些人眼裡應該是 Common Sense，但我很常看過了忘光光，要做過痛過才會印象深刻，寫文章也是希望自己再複習一遍，不會很快就忘記。

CORS是什麼？

CORS（Cross-Origin Resource Sharing，跨域資源共享）是瀏覽器（這是伏筆）的安全機制，限制網頁向不同網域的伺服器發送請求。這樣可以保護使用者的重要資料，防止惡意網站利用使用者的身份向其他網站發送未經授權的請求（CSRF 攻擊）。

那 CORS 怎麼運作勒?在網路上閱讀解釋運作原理的文字我很容易放空，用圖解會更好理解：

還有其他有關 CORS 的細節可以去看 🔗ExplainThis 的文章 !

那 Nginx 又是什麼呢?

Nginx 是網路伺服器、反向代理器（更多的解釋可以看看🔗 Nana 的影片教學！），在以下的例子是使用者瀏覽器與伺服器之間的中間人。使用者在瀏覽器輸入想要去的網址（譬如 https://www.moneySlave.com），瀏覽器在 DNS 用網域查詢外網 IP（WAN）位置，透過 Router 的封包傳送和防火牆擋掉不安全的連線，Nginx透過設計好規則將瀏覽器的請求分發到內網的伺服器。

我一樣上圖解可能大家比較好理解：

我遇到了一個問題！

我們公司有使用 Kintone 的服務作為內部行政簽核流程的系統，Kintone 官方表示為了安全考量，Kintone 只接受來自同源的請求，但是目前正在開發的系統會需要 Kintone 的資料，部屬的機台顯然與 Kintone 非同源。

P.S. 同源是指兩份網頁具備相同協定、埠號（有指定）以及主機位置，詳見 🔗mdn的解釋

🔗出處

怎麼辦！?

\ Nginx 出場了 // 這個時候我們可以在 nginx.conf 設定些什麼去解決這個問題！

Nginx 設定範例

server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /var/www/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 加上這裡!！設置代理 KINTONE API 請求
    location /kintone/ {
        rewrite ^/kintone/(.*)$ /$1 break;

        proxy_pass https://your-subdomain.cybozu.com;

        proxy_set_header Host your-subdomain.cybozu.com;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_pass_request_headers on;

        proxy_ssl_server_name on;
        proxy_ssl_protocols TLSv1.2 TLSv1.3;
    }
}

使用方式

當設定 nginx.conf 完成以後，開發系統的前端程式碼可以這樣呼叫：

// 原本需要跨網域的請求
// https://your-subdomain.cybozu.com/k/v1/records.json

// 現在透過同網域的代理
fetch('/kintone/k/v1/records.json', {
    method: 'GET',
    headers: {
        'X-Cybozu-API-Token': 'your-api-token'
    }
})

為什麼 Nginx 可以繞過 CORS 的限制？

瀏覽器 → Nginx (同源) → Kintone (不同源)

因為對瀏覽器來說，它只是向「同源」的 Nginx 發送請求，因此並沒有跨域的問題。而 Nginx 向 Kintone 發送資料請求是「伺服器」VS「伺服器」，他不會有問題！

為什麼？還記得上述我說的嗎？

CORS（Cross-Origin Resource Sharing，跨域資源共享）是瀏覽器的安全機制

所以這個情境並沒有問題喔！