背景：我要在小程序上顯示pexels.com上的圖片桦锄，然后我得先把pexels.com的域名添加到小程序的request合法域名中甫菠，但是pexels.com是國外的胆数，在國內(nèi)沒有備案所以添加不了完慧。解決方案就是：用一個已經(jīng)備案好的域名進(jìn)行轉(zhuǎn)發(fā)刻蚯，轉(zhuǎn)發(fā)的服務(wù)器我選擇的是微信云托管绊含，備案好的域名還需要ssl，沒有的話本文會講到如何申請一個免費(fèi)的ssl證書炊汹。
因為pexels.com開放了API可以拿到圖片躬充，所以得先請求https://api.pexels.com拿到圖片列表，圖片的域名是images.pexels.com讨便，兩個域名都不能通過小程序后臺的校驗：
所以得需要有一個已備案的域名來進(jìn)行轉(zhuǎn)發(fā)充甚，這樣就能繞過限制了。
需要準(zhǔn)備的物料：
1霸褒、一個在國內(nèi)已經(jīng)備案好的域名
2伴找、github賬號
大致流程如下：
開通微信云托管服務(wù)
基于微信云托管模板部署部署一個expressjs服務(wù)
修改服務(wù)的路由轉(zhuǎn)發(fā)
1、先開通微信云托管：
進(jìn)入控制臺：
https://cloud.weixin.qq.com/cloudrun/console
點擊新建服務(wù)废菱，輸入服務(wù)名稱點擊確定：
大家可以先fork一下我的代碼倉庫：
https://github.com/2424004764/pexels-proxy-expressjs技矮，我把轉(zhuǎn)發(fā)的代碼都寫好了
之后在選擇方式的時候選擇綁定github倉庫：
如果不方便使用github倉庫，也可以將倉庫代碼包下載下來以手動上傳代碼包的形式部署：
如果是github的話殊轴，提交代碼以后會重新自動部署衰倦，會方便很多，而手動上傳代碼包的話還得重新上傳再手動點擊部署旁理，比較麻煩一點樊零。
選擇好后點擊發(fā)布按鈕就開始部署了:
等待部署完成，一般這個步驟幾分鐘左右孽文，部署好是這樣的：
我們可以點擊云端調(diào)試測試下服務(wù)是否可用：
如果輸出了當(dāng)前時間驻襟，則表明服務(wù)是好的夺艰。
expressjs服務(wù)的index.js代碼如下：
const express = require('express');const { createProxyMiddleware } = require('http-proxy-middleware');const app = express();try {? // 創(chuàng)建一個代理中間件，將以 /photos 開頭的請求代理到目標(biāo)地址? const photosProxy = createProxyMiddleware({? ? target: "http://images.pexels.com/photos",? ? changeOrigin: true, // 設(shè)置更改請求頭中的 Origin? ? pathRewrite: {? ? ? // 將 /photos 開頭的請求重寫為目標(biāo)地址的不同路徑沉衣，保留 /photos? ? ? '^/photos': '' // 保留 /photos 部分郁副，只替換后面的部分? ? },? });? // 使用代理中間件來處理以 /photos 開頭的請求? app.use('/photos', photosProxy);? const photosApiProxy = createProxyMiddleware({? ? target: "https://api.pexels.com",? ? changeOrigin: true,? ? pathRewrite: {? ? ? '^/pexels-api': ''? ? }? });? // 當(dāng)請求pexels-api時也轉(zhuǎn)發(fā)? app.use('/pexels-api', photosApiProxy);? // 根目錄路由處理函數(shù)，輸出當(dāng)前時間? app.get('/', (req, res) => {? ? const currentTime = new Date().toLocaleString(); ?// 獲取當(dāng)前時間? ? res.send(`Current time is: ${currentTime}`); ? ? ? // 返回當(dāng)前時間到客戶端? });? app.listen(80, () => {? ? console.log("啟動成功");? });} catch (error) {? console.error('Failed to start application:', error);? process.exit(1); // 退出應(yīng)用并返回非零狀態(tài)碼}
簡書的編輯器太垃圾了厢蒜，代碼都顯示不好
這樣在一個域名下完成了兩個域名的轉(zhuǎn)發(fā)霞势，只要通過后綴區(qū)分即可烹植，我們先設(shè)置好自定義域名再說這么訪問斑鸦。
我們來到自定義域名頁面，點擊綁定域名：
假設(shè)aaaa.com是你已經(jīng)備案好的域名草雕，pexels-proxy是二級域名巷屿，如果你的域名有https證書的話，可以先把https證書上傳墩虹，如果沒有我在本文會講到如果10分鐘申請一個免費(fèi)https證書嘱巾。
申請免費(fèi)證書，我們打開并注冊一個賬號：https://www.sslchaoshi.com/
我們選擇體驗版證書：
選擇第一個诫钓，點擊查看詳情：
點擊購買：
選擇余額支付：
因為我這里已經(jīng)購買過了旬昭，所以不能再購買了：
購買后來到個人中心，這里應(yīng)該就能看到訂單了：
我記得好像是有驗證的菌湃，有一個選項是選擇dns问拘，然后需要驗證域名的cname記錄，按操作完成后等幾分鐘就能下證了：
我們點擊證書打包下載惧所，打開解壓后的目錄的ALL目錄：
我們再回到微信云托管的自定義域名頁面：
依次上傳證書和私鑰骤坐，然后點擊確定，之后就會得到一個cname的記錄值：
可在這里檢車ssl證書狀態(tài)（微信官方推薦）：
https://myssl.com/ssl.html
再去域名注冊商處解析一個cname記錄即可
訪問方式：
1下愈、如果是請求api：則最終請求url為
https://pexels-proxy.aaaa.com/pexels-api/v1/curated纽绍。這樣就能繞過pexels.com未備案的限制了
2、如果是請求的圖片:
我們請求api的時候返回的列表格式為：
我們只需要將圖片的域名改成我們的子域名即可：
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是小圖拌夏，作為列表只用，如果點擊履因，則顯示原圖障簿，這樣圖片就不會失真了。
效果：
這篇文章就到這里啦搓逾！如果你對文章內(nèi)容有疑問或想要深入討論卷谈，歡迎在評論區(qū)留言，我會盡力回答霞篡。同時世蔗，如果你覺得這篇文章對你有幫助端逼，不妨點個贊并分享給其他同學(xué)，讓更多人受益污淋。
想要了解更多相關(guān)知識顶滩，可以查看我以往的文章，其中有許多精彩內(nèi)容寸爆。記得關(guān)注我礁鲁，獲取及時更新，我們可以一起學(xué)習(xí)赁豆、討論技術(shù)仅醇，共同進(jìn)步。
感謝你的閱讀與支持魔种，期待在未來的文章中與你再次相遇析二！
