背景：我要在小程序上顯示pexels.com上的圖片，然后我得先把pexels.com的域名添加到小程序的request合法域名中，但是pexels.com是國(guó)外的，在國(guó)內(nèi)沒(méi)有備案所以添加不了。解決方案就是：用一個(gè)已經(jīng)備案好的域名進(jìn)行轉(zhuǎn)發(fā)，轉(zhuǎn)發(fā)的服務(wù)器我選擇的是微信云托管，備案好的域名還需要ssl，沒(méi)有的話本文會(huì)講到如何申請(qǐng)一個(gè)免費(fèi)的ssl證書。
因?yàn)閜exels.com開(kāi)放了API可以拿到圖片，所以得先請(qǐng)求https://api.pexels.com拿到圖片列表，圖片的域名是images.pexels.com，兩個(gè)域名都不能通過(guò)小程序后臺(tái)的校驗(yàn)：
所以得需要有一個(gè)已備案的域名來(lái)進(jìn)行轉(zhuǎn)發(fā)，這樣就能繞過(guò)限制了。
需要準(zhǔn)備的物料：
1、一個(gè)在國(guó)內(nèi)已經(jīng)備案好的域名
2、github賬號(hào)
大致流程如下：
開(kāi)通微信云托管服務(wù)
基于微信云托管模板部署部署一個(gè)expressjs服務(wù)
修改服務(wù)的路由轉(zhuǎn)發(fā)
1、先開(kāi)通微信云托管：
進(jìn)入控制臺(tái)：
https://cloud.weixin.qq.com/cloudrun/console
點(diǎn)擊新建服務(wù)，輸入服務(wù)名稱點(diǎn)擊確定：
大家可以先f(wàn)ork一下我的代碼倉(cāng)庫(kù)：
https://github.com/2424004764/pexels-proxy-expressjs，我把轉(zhuǎn)發(fā)的代碼都寫好了
之后在選擇方式的時(shí)候選擇綁定github倉(cāng)庫(kù)：
如果不方便使用github倉(cāng)庫(kù)，也可以將倉(cāng)庫(kù)代碼包下載下來(lái)以手動(dòng)上傳代碼包的形式部署：
如果是github的話，提交代碼以后會(huì)重新自動(dòng)部署，會(huì)方便很多，而手動(dòng)上傳代碼包的話還得重新上傳再手動(dòng)點(diǎn)擊部署，比較麻煩一點(diǎn)。
選擇好后點(diǎn)擊發(fā)布按鈕就開(kāi)始部署了:
等待部署完成，一般這個(gè)步驟幾分鐘左右，部署好是這樣的：
我們可以點(diǎn)擊云端調(diào)試測(cè)試下服務(wù)是否可用：
如果輸出了當(dāng)前時(shí)間，則表明服務(wù)是好的。
expressjs服務(wù)的index.js代碼如下：
const express = require('express');const { createProxyMiddleware } = require('http-proxy-middleware');const app = express();try {? // 創(chuàng)建一個(gè)代理中間件，將以 /photos 開(kāi)頭的請(qǐng)求代理到目標(biāo)地址? const photosProxy = createProxyMiddleware({? ? target: "http://images.pexels.com/photos",? ? changeOrigin: true, // 設(shè)置更改請(qǐng)求頭中的 Origin? ? pathRewrite: {? ? ? // 將 /photos 開(kāi)頭的請(qǐng)求重寫為目標(biāo)地址的不同路徑，保留 /photos? ? ? '^/photos': '' // 保留 /photos 部分，只替換后面的部分? ? },? });? // 使用代理中間件來(lái)處理以 /photos 開(kāi)頭的請(qǐng)求? app.use('/photos', photosProxy);? const photosApiProxy = createProxyMiddleware({? ? target: "https://api.pexels.com",? ? changeOrigin: true,? ? pathRewrite: {? ? ? '^/pexels-api': ''? ? }? });? // 當(dāng)請(qǐng)求pexels-api時(shí)也轉(zhuǎn)發(fā)? app.use('/pexels-api', photosApiProxy);? // 根目錄路由處理函數(shù)，輸出當(dāng)前時(shí)間? app.get('/', (req, res) => {? ? const currentTime = new Date().toLocaleString(); ?// 獲取當(dāng)前時(shí)間? ? res.send(`Current time is: ${currentTime}`); ? ? ? // 返回當(dāng)前時(shí)間到客戶端? });? app.listen(80, () => {? ? console.log("啟動(dòng)成功");? });} catch (error) {? console.error('Failed to start application:', error);? process.exit(1); // 退出應(yīng)用并返回非零狀態(tài)碼}
簡(jiǎn)書的編輯器太垃圾了，代碼都顯示不好
這樣在一個(gè)域名下完成了兩個(gè)域名的轉(zhuǎn)發(fā)，只要通過(guò)后綴區(qū)分即可，我們先設(shè)置好自定義域名再說(shuō)這么訪問(wèn)。
我們來(lái)到自定義域名頁(yè)面，點(diǎn)擊綁定域名：
假設(shè)aaaa.com是你已經(jīng)備案好的域名，pexels-proxy是二級(jí)域名，如果你的域名有https證書的話，可以先把https證書上傳，如果沒(méi)有我在本文會(huì)講到如果10分鐘申請(qǐng)一個(gè)免費(fèi)https證書。
申請(qǐng)免費(fèi)證書，我們打開(kāi)并注冊(cè)一個(gè)賬號(hào)：https://www.sslchaoshi.com/
我們選擇體驗(yàn)版證書：
選擇第一個(gè)，點(diǎn)擊查看詳情：
點(diǎn)擊購(gòu)買：
選擇余額支付：
因?yàn)槲疫@里已經(jīng)購(gòu)買過(guò)了，所以不能再購(gòu)買了：
購(gòu)買后來(lái)到個(gè)人中心，這里應(yīng)該就能看到訂單了：
我記得好像是有驗(yàn)證的，有一個(gè)選項(xiàng)是選擇dns，然后需要驗(yàn)證域名的cname記錄，按操作完成后等幾分鐘就能下證了：
我們點(diǎn)擊證書打包下載，打開(kāi)解壓后的目錄的ALL目錄：
我們?cè)倩氐轿⑿旁仆泄艿淖远x域名頁(yè)面：
依次上傳證書和私鑰，然后點(diǎn)擊確定，之后就會(huì)得到一個(gè)cname的記錄值：
可在這里檢車ssl證書狀態(tài)（微信官方推薦）：
https://myssl.com/ssl.html
再去域名注冊(cè)商處解析一個(gè)cname記錄即可
訪問(wèn)方式：
1、如果是請(qǐng)求api：則最終請(qǐng)求url為
https://pexels-proxy.aaaa.com/pexels-api/v1/curated。這樣就能繞過(guò)pexels.com未備案的限制了
2、如果是請(qǐng)求的圖片:
我們請(qǐng)求api的時(shí)候返回的列表格式為：
我們只需要將圖片的域名改成我們的子域名即可：
let list = []
res.photos.forEach((item, index) => {
list.push({
title: item.alt,
image: item.src.medium.replace("images.pexels.com", "pexels-proxy.aaaa.com"),
})
})
這里返回的src.original是原圖，medium是小圖，作為列表只用，如果點(diǎn)擊，則顯示原圖，這樣圖片就不會(huì)失真了。
效果：
這篇文章就到這里啦！如果你對(duì)文章內(nèi)容有疑問(wèn)或想要深入討論，歡迎在評(píng)論區(qū)留言，我會(huì)盡力回答。同時(shí)，如果你覺(jué)得這篇文章對(duì)你有幫助，不妨點(diǎn)個(gè)贊并分享給其他同學(xué)，讓更多人受益。
想要了解更多相關(guān)知識(shí)，可以查看我以往的文章，其中有許多精彩內(nèi)容。記得關(guān)注我，獲取及時(shí)更新，我們可以一起學(xué)習(xí)、討論技術(shù)，共同進(jìn)步。
感謝你的閱讀與支持，期待在未來(lái)的文章中與你再次相遇！
