Uniapp跨域解決方案

一、什麼是跨域

在Web開發過程中，當發起跨域請求時，瀏覽器會根據同源策略(Same-Origin Policy)攔截請求。同源策略要求發起請求的源(協議，域名，端口號)必須與接收請求的源一致，否則會被瀏覽器攔截。

比如說，當你的uniapp應用運行在一個http://localhost:8080的地址下，而你在應用中發起了請求去訪問 http://www.example.com這個源時，由於兩個源不一致，請求就會被攔截。

二、為什麼uniapp需要跨域解決方案

與其他框架一樣，uniapp也需要發起跨域請求。因為如果不使用跨域，則uniapp無法獲得跨域目標服務器上的數據。比如你需要通過uniapp向服務器請求一個json數據，但是這個json數據卻不在同一個域下。

既然同源策略限制了我們的請求，我們就需要尋找其他的方式來解決這個問題。

三、uniapp跨域解決方案

1. 使用代理

代理是一種常見的跨域解決方案，它的原理是將請求發送給同源服務器，然後由同源服務器轉發到目標服務器，目標服務器返回數據後再由同源服務器將數據返回給客戶端。

在uniapp中使用代理需要注意以下幾點：

1、需要在vue.config.js文件中配置代理

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2、在接口調用中使用絕對路徑

uni.request({
  url: '/api/getData',
  method: 'POST',
  data: {
    name: 'John'
  },
  success: res => {
    console.log(res.data)
  }
})

3、因為使用了代理，所以需要保證同源服務器可以正常訪問目標服務器，否則同樣無法獲得預期結果。

2. 使用jsonp

jsonp也是一種跨域請求的方式，它的原理是在客戶端使用script標籤動態創建一個 JavaScript 文件，並通過 URL 傳參方式來傳遞數據，該 JavaScript 文件載入成功後會執行回調函數，並且會把數據作為參數傳入。

在uniapp中使用jsonp需要注意以下幾點：

1、需要在服務端支持jsonp協議，即接口返回格式為callback(data)的格式

2、在請求接口時需要帶上callback參數，參數值為回調函數名稱

uni.request({
  url: 'http://www.example.com/api/getData',
  data:{
    name: 'John'
  },
  dataType:'jsonp',
  jsonpCallback:'callback',
  success: res => {
    console.log(res.data)
  }
})

3、jsonp的優點是可以兼容舊瀏覽器，但是它也有一些缺點，比如只能使用GET請求，且不支持異常處理。

3. 使用CORS

在服務端設置CORS(Cross-Origin Resource Sharing)是解決跨域問題的另一種方案。CORS是W3C規範中定義的一種支持跨域訪問的方式，它通過在服務端響應頭中加入Access-Control-Allow-*系列的頭部信息，來告訴瀏覽器允許跨域請求。

開啟CORS需要服務端支持，然後我們可以在uniapp中簡單地發起跨域請求：

uni.request({
  url: 'http://www.example.com/api/getData',
  method: 'POST',
  data: {
    name: 'John'
  },
  header: {
    'content-type': 'application/json'
  },
  success: res => {
    console.log(res.data)
  }
})

四、總結

以上就是uniapp中常見的跨域解決方案。每種方式都有它自己的特點和適用場景，選擇合適的方式可以使我們順利地解決跨域問題，獲得預期結果。