ShopBack 前端工程師面試題目與答案：HTTP、JWT、CORS 與 LeetCode

JOHN TOWNER on Unsplash

📡 HTTP 請求方法

在 Web 開發中，HTTP 方法（Methods）決定了請求的行為。以下是常見的 HTTP 方法：

• GET：用於請求資源（讀取資料）
• POST：用於提交資料（如表單）
• PUT：用於更新資源（完整更新）
• PATCH：用於部分更新資源
• DELETE：用於刪除資源

範例：

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' }
})
  .then(response => response.json())
  .then(data => console.log(data));

🔐 JWT（JSON Web Token）介紹

JSON Web Token（JWT）是一種用於認證與授權的輕量級機制。它通常由三個部分組成：

1. Header（標頭）：包含 Token 類型（typ）與加密演算法（alg）。
2. Payload（負載）：包含使用者資訊與權限等內容。
3. Signature（簽名）：使用密鑰對 Header 和 Payload 進行簽名，以確保數據完整性。

JWT 的應用場景

• 身份驗證：使用 JWT 來驗證使用者身份。
• API 授權：確保請求者具有適當的權限。
• 單點登入（SSO）：讓使用者在多個應用間無縫切換。

範例 JWT： eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNjEyMzQ1Njc4fQ.HMACSHA256

注意：JWT 在使用時應該考慮安全風險，如存儲方式、過期時間、以及是否適用於 Session 管理。

🌍 源資源共用（CORS）是什麼？如何設定 CORS？

CORS（Cross-Origin Resource Sharing）是一種機制，允許不同來源（origin）之間的請求。

如果前端發送請求到不同來源的 API（例如 https://api.example.com），預設會被瀏覽器阻擋。要解決這個問題，需要後端設定 CORS。

📌 範例（Express.js）：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({ origin: 'https://yourfrontend.com' }));

app.get('/data', (req, res) => {
  res.json({ message: 'CORS 設定成功！' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

🔄 在瀏覽器輸入網址並送出後，到底發生了什麼事？

1. DNS 解析（Domain Name System）
2. TCP 連線建立（握手）
3. 發送 HTTP 請求
4. 伺服器處理請求並回應 ⚙
5. 瀏覽器解析 HTML / CSS / JS
6. 渲染頁面 & 執行 JavaScript

這是一個經典的面試問題，理解這個過程能幫助你掌握 Web 的運作原理！

⚠️ HTTP 狀態碼

• 200 OK：請求成功。
• 201 Created：資源成功建立。
• 400 Bad Request：請求錯誤。
• 401 Unauthorized：未授權，需要登入。
• 403 Forbidden：無權訪問。
• 404 Not Found：找不到資源。
• 500 Internal Server Error：伺服器錯誤。

🧩 LeetCode 題目解析

LeetCode 3. Longest Substring Without Repeating Characters

題目： 找出一個字串中，不包含重複字符的最長子字串長度。

📌 解法（Sliding Window）：

var lengthOfLongestSubstring = function(s) {
  let set = new Set();
  let left = 0, maxLength = 0;

  for (let right = 0; right < s.length; right++) {
    while (set.has(s[right])) {
      set.delete(s[left]);
      left++;
    }
    set.add(s[right]);
    maxLength = Math.max(maxLength, right - left + 1);
  }
  return maxLength;
};

時間複雜度：O(n)

LeetCode 20. Valid Parentheses

題目： 判斷括號是否有效（成對匹配）。

📌 解法（Stack）：

var isValid = function(s) {
  let stack = [];
  let map = { ')': '(', '}': '{', ']': '[' };
  
  for (let char of s) {
    if (char in map) {
      if (stack.pop() !== map[char]) return false;
    } else {
      stack.push(char);
    }
  }
  return stack.length === 0;
};

時間複雜度：O(n)

🎯 總結

這篇文章涵蓋了 HTTP 方法、JWT 的風險、CORS 設定、HTTP 狀態碼，以及兩道 LeetCode 題目的解法！希望對你有所幫助！🚀

💬 你最想了解哪個主題呢？歡迎留言交流！