在小程序開發(fā)過程中，很多開發(fā)者尤其是初學(xué)者，經(jīng)常會(huì)遇到一個(gè)令人困惑的問題：“為什么我的小程序無法請(qǐng)求第三方API接口？”并自然而然地聯(lián)想到Web開發(fā)中的“跨域”問題。然而，小程序的網(wǎng)絡(luò)請(qǐng)求機(jī)制與瀏覽器并不完全相同。本文將深入淺出地解析所謂 “小程序跨域” 問題的本質(zhì)，并提供一套完整且實(shí)用的 小程序跨域解決方案。
一、理解本質(zhì)：小程序沒有傳統(tǒng)意義的“跨域”
首先，我們需要糾正一個(gè)常見的誤解。在Web瀏覽器中，“跨域”問題源于同源策略（Same-origin policy） 的安全限制，它限制了來自一個(gè)源的文檔或腳本如何與另一個(gè)源的資源進(jìn)行交互。
而小程序的運(yùn)行環(huán)境并非瀏覽器，而是微信客戶端。其網(wǎng)絡(luò)請(qǐng)求是由微信客戶端發(fā)起的，因此不存在瀏覽器的同源策略。小程序真正的限制來自于其域名白名單機(jī)制。
微信小程序要求所有需要請(qǐng)求的網(wǎng)絡(luò)服務(wù)器域名，都必須提前在小程序管理后臺(tái)進(jìn)行配置，登記在“開發(fā)設(shè)置”->“服務(wù)器域名”中。只有在白名單中的域名，才允許被小程序發(fā)起請(qǐng)求。如果請(qǐng)求的域名不在白名單內(nèi)，客戶端會(huì)直接攔截這次請(qǐng)求并在控制臺(tái)報(bào)錯(cuò) `不在以下 request 合法域名列表中`。
所以，我們通常所說的“小程序跨域”，實(shí)際上指的是“未將域名配置到服務(wù)器白名單”而導(dǎo)致的請(qǐng)求失敗問題。
二、核心解決方案：三種方法應(yīng)對(duì)不同場(chǎng)景
針對(duì)上述問題，我們有以下幾種主流且有效的解決方案。
解決方案一：配置服務(wù)器域名（正式環(huán)境首選）
這是最官方、最推薦也是必須為線上正式服務(wù)采用的方案。
操作步驟：
1. 獲取備案好的域名：確保你的服務(wù)器API地址擁有一個(gè)已經(jīng)完成ICP備案的域名（`https://`）。
2. 登錄小程序后臺(tái)：進(jìn)入微信公眾平臺(tái)，找到你的小程序。
3. 配置域名：在左側(cè)菜單找到【開發(fā)】->【開發(fā)設(shè)置】，在“服務(wù)器域名”欄目中，按要求配置`request合法域名`。
一個(gè)月內(nèi)可有5次修改機(jī)會(huì)。
僅支持`https`（`wx.request`）和`wss`（`wx.connectSocket`）協(xié)議。
域名不能使用IP地址或localhost。
優(yōu)點(diǎn)：
符合微信官方規(guī)范，安全可靠。
直接通信，效率最高。
缺點(diǎn)：
需要已備案的域名，對(duì)開發(fā)測(cè)試階段不友好。
有修改次數(shù)限制。
解決方案二：使用微信開發(fā)者工具臨時(shí)開啟（僅限開發(fā)調(diào)試）
在開發(fā)階段，如果后端API尚未部署到線上域名，我們通常會(huì)在本地localhost進(jìn)行開發(fā)。此時(shí)，可以使用微信開發(fā)者工具提供的臨時(shí)設(shè)置。
操作步驟：
1. 打開微信開發(fā)者工具。
2. 點(diǎn)擊右上角的【詳情】->【本地設(shè)置】。
3. 勾選【不校驗(yàn)合法域名、web-view（業(yè)務(wù)域名）、TLS版本以及HTTPS證書】。
勾選此選項(xiàng)后，工具在運(yùn)行時(shí)會(huì)跳過對(duì)域名的校驗(yàn)，方便開發(fā)者在本地進(jìn)行調(diào)試。但請(qǐng)注意：此選項(xiàng)僅在開發(fā)者工具中生效，真機(jī)調(diào)試和線上版本均無效。
優(yōu)點(diǎn)：
極大方便了本地開發(fā)和聯(lián)調(diào)。
設(shè)置簡(jiǎn)單，一鍵開啟。
缺點(diǎn)：
僅限開發(fā)工具，不能用于解決真機(jī)和線上環(huán)境的問題。
解決方案三：利用云函數(shù)中轉(zhuǎn)（萬能方案）
對(duì)于無法配置域名（如請(qǐng)求第三方公開API）或后端服務(wù)在開發(fā)初期難以快速配置HTTPS域名的情況，使用小程序云開發(fā)中的云函數(shù)是一個(gè)極其強(qiáng)大的“萬能”方案。
原理：由于云函數(shù)運(yùn)行在微信的服務(wù)器上，它沒有域名白名單的限制，可以自由請(qǐng)求任何公網(wǎng)HTTP/HTTPS服務(wù)。小程序只需調(diào)用云函數(shù)，由云函數(shù)去請(qǐng)求第三方API，獲取數(shù)據(jù)后再返回給小程序。
實(shí)現(xiàn)示例：
1. 開通小程序云開發(fā)功能。
2. 創(chuàng)建一個(gè)云函數(shù)，例如 `fetchData`：
// cloudfunctions/fetchData/index.js
const cloud = require('wx-server-sdk')
cloud.init()
const rp = require('request-promise') // 需npm安裝此依賴
exports.main = async (event, context) => {
const { url } = event // 接收小程序傳來的API地址
try {
const result = await rp({
uri: url,
method: 'GET',
json: true // 根據(jù)API返回格式調(diào)整
})
return result // 將第三方API的數(shù)據(jù)返回給小程序
} catch (err) {
return err
}
}
3. 在小程序端調(diào)用這個(gè)云函數(shù)：
wx.cloud.callFunction({
name: 'fetchData',
data: {
url: 'https://some-public-api.com/data' // 任意第三方API
}
}).then(res => {
console.log(res.result) // 拿到最終數(shù)據(jù)
}).catch(console.error)
優(yōu)點(diǎn)：
徹底規(guī)避域名限制問題，可以請(qǐng)求任何地址。
無需自己配置和管理后端服務(wù)器，免運(yùn)維。
云環(huán)境天然支持HTTPS，安全可靠。
缺點(diǎn)：
會(huì)產(chǎn)生云函數(shù)調(diào)用次數(shù)和出流量的費(fèi)用（免費(fèi)額度通常足夠個(gè)人小程序使用）。
網(wǎng)絡(luò)鏈路變長(zhǎng)，會(huì)增加一定的延遲（一次小程序->云函數(shù)->API->云函數(shù)->小程序的往返）。
三、總結(jié)與選擇建議
解決方案
|
適用場(chǎng)景
|
優(yōu)點(diǎn)
|
缺點(diǎn)
|
配置服務(wù)器域名
|
正式線上環(huán)境
|
官方推薦、性能、安全
|
需備案域名、有修改次數(shù)限制
|
開發(fā)者工具臨時(shí)設(shè)置
|
本地開發(fā)調(diào)試
|
簡(jiǎn)單方便、無需配置
|
僅限開發(fā)工具，不能用于真機(jī)
|
云函數(shù)中轉(zhuǎn)
|
請(qǐng)求第三方API、無域名環(huán)境
|
萬能、免運(yùn)維、安全
|
有輕微延遲、可能產(chǎn)生費(fèi)用
|
理解問題本質(zhì)是解決問題的第一步。小程序的網(wǎng)絡(luò)請(qǐng)求限制是基于安全考慮的域名白名單，而非瀏覽器跨域。在選擇 小程序跨域解決方案 時(shí)，請(qǐng)根據(jù)您的實(shí)際開發(fā)階段和需求，選擇合適的方法。對(duì)于正式項(xiàng)目，配置合法域名是必經(jīng)之路；而對(duì)于開發(fā)和特殊場(chǎng)景，臨時(shí)設(shè)置和云函數(shù)則是非常強(qiáng)大的輔助工具。希望本文能幫助您順利解決開發(fā)中的網(wǎng)絡(luò)請(qǐng)求難題。
13590461663
粵公網(wǎng)安備 44030602002171號(hào)
