開發環境準備好後，接下來我遇到的第一個實際開發問題，就是「我要怎麼拿到使用者的 IP？」 聽起來很簡單，但實際操作才發現瀏覽器並不會直接把使用者的真實 IP 丟給你。 所以我需要透過第三方 API 來協助抓取。

為什麼不能直接從瀏覽器取得 IP？

因為現代瀏覽器基於隱私政策，不會把使用者的公開 IP 直接暴露給前端程式。除非是像 WebRTC 那種 特殊情況，不然你基本上看不到使用者的 IP。這也代表我一定得使用外部 IP API。

選一個好用的 IP API

IP API 有很多種，我試了幾個以後，最後選擇使用 ipify API。 它的回傳格式乾淨、速度快，而且免費方案就能滿足一般查詢需求。 它的查詢方式也非常簡單，只要 GET 一次就能拿到一個 JSON。

https://api.ipify.org?format=json

這會回傳像這樣的內容：

{
    "ip": "123.123.123.123"
}

在 React 裡取得 IP

接著，我在 React 裡寫了一段最簡單的 fetch 請求，用來抓取 API 並把 IP 顯示在頁面上。 這邊先用 React 的 useEffect 來在頁面載入時請求 API。

import {useState,useEffect} from "react"

function App(){
    const[ip,setIp]=useState("")

    useEffect(function(){
        fetch("https://api.ipify.org?format=json")
        .then(function(res){
            return res.json()
        })
        .then(function(data){
            setIp(data.ip)
        })
    },[])

    return(
        <div>
            你的IP是：{ip}
        </div>
    )
}

export default App

這樣頁面一打開，就能立即看到使用者目前的 IP。 API 回傳得很快，所以畫面幾乎是瞬間更新。