fetch 與 $.ajax 深度比較：為什麼 fetch 容易遇到 CORS 問題？#

1
// fetch 寫法 - 需要明確指定
2
fetch(url, {
3
  credentials: 'include'  // 需要明確指定才會發送 cookies
4
})
5

6
// $.ajax 寫法 - jQuery 的設定方式
7
$.ajax({
8
  xhrFields: {
9
    withCredentials: true  // jQuery 的 cookie 設定方式
10
  }
11
})

1
// fetch: 現代瀏覽器 API
2
if ('fetch' in window) {
3
  // 支援 fetch
4
} else {
5
  // 需要 polyfill 或降級到 XMLHttpRequest
6
}
7

8
// $.ajax: jQuery 封裝的 XMLHttpRequest
9
// 相容性更好，支援所有瀏覽器

1
// fetch 對跨域請求更嚴格
2
fetch(url, {
3
  credentials: 'include',  // 必須明確指定
4
  mode: 'cors',           // 明確的 CORS 模式
5
  headers: {
6
    'Content-Type': 'application/json',
7
  }
8
})

1
// ❌ fetch: 預設不發送 cookies
2
fetch('/api/data')  // 不會發送 cookies，可能導致認證失敗
3

4
// ✅ $.ajax: 根據 jQuery 版本和設定會自動處理
5
$.ajax({
6
  url: '/api/data'  // 可能會自動發送必要的 cookies
7
})

1
// fetch: 只有網路錯誤才會 reject
2
fetch('/api/data')
3
  .then(response => {
4
    // ❌ HTTP 404, 500 等狀態碼不會自動拋出錯誤
5
    if (!response.ok) {
6
      throw new Error('HTTP error')
7
    }
8
    return response.json()
9
  })
10
  .catch(error => {
11
    // 只處理網路錯誤和手動拋出的錯誤
12
    console.error(error)
13
  })
14

15
// $.ajax: 自動處理 HTTP 錯誤狀態
16
$.ajax({
17
  url: '/api/data'
18
})
19
.done(function(data) {
20
  // ✅ 只有 2xx 狀態碼才會執行
21
  console.log(data)
22
})
23
.fail(function(xhr) {
24
  // ✅ HTTP 錯誤會自動進入這裡
25
  console.error('HTTP error:', xhr.status)
26
})

1
const response = await fetch('https://api.example.com/v1/users/123', {
2
  method: 'GET',
3
  credentials: 'include',  // 明確指定發送 cookies
4
  headers: {
5
    'Content-Type': 'application/json',
6
  },
7
});
8

9
// ❌ 需要手動檢查狀態
10
if (!response.ok) {
11
  throw new Error(`HTTP error! status: ${response.status}`);
12
}
13

14
// ❌ 手動解析 JSON
15
const result = await response.json();

1
const result = await new Promise((resolve, reject) => {
2
  $.ajax({
3
    url: 'https://api.example.com/v1/users/123',
4
    type: 'GET',
5
    dataType: 'json',    // ✅ 自動解析 JSON
6
    xhrFields: {
7
      withCredentials: true  // ✅ jQuery 的 cookie 設定方式
8
    }
9
  })
10
  .done(function(response) {
11
    // ✅ 自動處理成功狀態
12
    resolve(response);
13
  })
14
  .fail(function(xhr, status, error) {
15
    // ✅ 自動處理錯誤狀態
16
    reject(new Error(`HTTP error! status: ${xhr.status}, error: ${error}`));
17
  });
18
});

1
// 創建一個封裝函數
2
async function apiRequest(url, options = {}) {
3
  const defaultOptions = {
4
    credentials: 'include',
5
    headers: {
6
      'Content-Type': 'application/json',
7
      ...options.headers,
8
    },
9
    ...options,
10
  };
11

12
  try {
13
    const response = await fetch(url, defaultOptions);
14

15
    if (!response.ok) {
16
      throw new Error(`HTTP error! status: ${response.status}`);
17
    }
18

19
    return await response.json();
20
  } catch (error) {
21
    console.error('API Request failed:', error);
22
    throw error;
23
  }
24
}
25

26
// 使用封裝函數
27
const result = await apiRequest('https://api.example.com/v1/users/123');

1
// 使用 axios（推薦）
2
import axios from 'axios';
3

4
const api = axios.create({
5
  withCredentials: true,
6
  headers: {
7
    'Content-Type': 'application/json',
8
  },
9
});
10

11
const result = await api.get('https://api.example.com/v1/users/123');