使用axios解決跨域問題 – 前端工程師必備技能

跨域是指一個域名下的網頁去請求另一個域名下的資源，這個過程涉及到瀏覽器的同源策略，如果跨域請求不加處理直接發送是會被瀏覽器阻止的。在前端工程師開發實踐中，跨域是一個常見的問題，而axios是一個非常流行的網絡請求庫，在本文中我們將會探討如何使用axios解決跨域問題。

一、跨域問題的產生原因

跨域問題產生的原因是瀏覽器限制了網頁對不同源之間數據的訪問，如果一個域名上的網頁想要訪問另一個域名上的網頁，瀏覽器就會阻止這個操作，這個限制被稱為同源策略。同源指的是協議、域名和端口號相同，當這三者任意一個不同，就會被認為是跨域請求。

// 例子
// 當前域名為 http://localhost:8080
// 下列網址都是跨域請求
http://www.baidu.com
https://www.google.com
http://localhost:3000
http://localhost:8081

二、跨域問題的解決方案

在實際開發中，通常有以下解決跨域問題的方案。

1. 服務器端進行跨域

在服務端配置相應的響應頭，開放對不同源的訪問權限。例如在 Node.js 中使用 CORS 模塊，或是在 Nginx 中配置不同域名的代理。這個方案是在服務端進行配置，不需要在前端做任何改動。

2. JSONP

JSONP 是一種跨域解決方案，通過在前端定義一個回調函數，將回調函數名通過 url 傳遞給後端，然後後端返回 JavaScript 代碼，該代碼調用該回調函數，並將數據作為參數傳遞給該回調函數。這個方案需要後端配合，前後端都需要進行代碼改動，而且只能用於 GET 請求。

3. WebSocket

WebSocket 是 HTML5 提供的一種跨域通訊方法，它利用了 HTTP 協議來建立連接，然後轉由 TCP/IP 協議發送數據。這個方案需要在前後端都進行代碼改動，但是相比於其他方案，WebSocket 可以支持雙向通訊且傳輸速度更快。

4. CORS

CORS（跨域資源共享）是一種官方標準的解決跨域的方案。在服務端設置相應的響應頭，允許不同源的請求。這個方案不需要前端做任何改動，只需要服務器適當地設置響應頭即可。CORS 方案支持所有類型的 HTTP 請求方法。

三、使用axios進行跨域請求

axios 是一個基於 Promise 的異步請求庫，它是一個非常強大的網絡請求庫，而且使用非常方便。下面介紹如何使用 axios 進行跨域請求。

// 安裝axios
npm install axios --save

對於 axios 跨域請求，我們只需要設置請求頭和使用 withCredentials 即可。withCredentials 用於跨域請求時帶上 cookie，這是跨域請求時容易忽略的細節。

import axios from 'axios';

// 設置基礎請求路徑
axios.defaults.baseURL = 'http://localhost:3000';

// 設置設定超時時間
axios.defaults.timeout = 10000;

// 設置響應攔截器
axios.interceptors.response.use(
  response => response.data,
  error => Promise.reject(error),
);

// 發送 GET 請求
axios.get('/user', {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  withCredentials: true,
})
  .then(res => console.log(res))
  .catch(error => console.error(error));

// 發送 POST 請求
axios.post('/login', {
  username: 'admin',
  password: '123456'
}, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  withCredentials: true,
})
  .then(res => console.log(res))
  .catch(error => console.error(error));

四、總結

本文介紹了跨域問題產生的原因，以及解決跨域問題的相關方案，同時也介紹了如何使用 axios 進行跨域請求。當然，跨域請求並不是一件簡單的事情，正確使用一定的跨域解決方案才是王道。在實際開發中，我們要根據情況來選擇跨域解決方案，唯有這樣才能開發出更加高效、優雅的應用程序。