解決axios跨域問題的方法詳解

一、跨域問題解釋

跨域問題是指在一個域名下，訪問另一個域名的資源時出現了限制，這種限制是由瀏覽器實行了同源策略所引起的。

所謂同源即同協議、同域名、同埠，只要有一個不同就是跨域了。

二、常用解決跨域問題的方法

1. CORS（Cross-Origin Resource Sharing）

CORS基於HTTP頭部添加可訪問的域名地址來進行跨域請求，相對於自己上前端開發的人員只需配置請求後台API的路徑即可。如下：

axios({
    method: 'get',
    url: 'https://api.apiopen.top/getJoke?page=1&count=2&type=video'
    withCredentials: true //後端要設置Access-Control-Allow-Credentials: true 才能訪問
}).then(res=> {
      console.log(res)
})

其原理是在瀏覽器中發起請求時，在請求頭部中添加Origin欄位標記本次請求的來源域名，伺服器端在處理請求之後添加Access-Control-Allow-Origin: *標識跨域接受哪些域名可以帶cookie發出請求。

2. 代理

webpack代理，或者前段nginx代理，可以讓請求變成本地請求來解決跨域問題，也能防止客戶端請求時直接訪問第三方伺服器；同時請求的代理也可以在本地開發時模擬介面數據。

"proxy": {
    "/api": {
      "target": "https://api.apiopen.top", //代理的後台
      "changeOrigin": true,
      "pathRewrite": {"^/api": ""}//這個不解釋
    }
} 

3. JSONP

JSONP利用的是頁面的script標籤跨域請求不受瀏覽器同源策略的限制來獲取數據，通過寫回調函數，數據會當做參數傳遞到回調函數中，再通過回調函數來操作拿到的數據。

4. nginx反向代理

nginx可以做網關，同時也作為反向代理，將請求按照配置轉發到對應的後台伺服器，同時可以在nginx上設置CORS。

5. postMessage通信

window.postMessage(message, targetOrigin)方法是用來來自不同域的窗口之間的通信的。例如，假設文檔 A 包含一個，該 來自文檔 B，如果在 的 Javascript 中調用了 window.postMessage() 方法，那麼，文檔 A 中用於監聽的 JavaScript 代碼能夠接收到消息。

三、實際應用

根據實際情況選擇使用以下解決跨域問題的方式，對於後端設置了CORS的情況可以直接使用axios，對於不允許前端直接訪問後端介面的情況使用代理，對於只支持JSONP方式的可以使用第三方庫jsonp引用，對於已經有nginx伺服器的可使用nginx反向代理，對於iframe嵌套的，可以使用postMessage或者window.name進行傳遞數據。

這裡是示例代碼，使用CORS和代理解決Axios跨域問題的實現：

CORS方式

axios({
  url: "https://api.apiopen.top/getJoke",
  method: "get",
  withCredentials: true,
  headers: { "Access-Control-Allow-Origin": "*" }
}).then(res => {
  console.log(res.data);
});

代理方式

axios({
  url: "/api/getJoke",
  method: "get"
}).then(res => {
  console.log(res.data);
});

以上就是解決axios跨域問題的幾種方式了，根據實際需求進行選擇。希望可以為大家提供幫助。