解決uniapp h5 本地代理實現跨域訪問及如何配置開發環境

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

如何解決uniapp H5本地代理實現跨域訪問？

1.第一種解決方法：

直接建立一個vue.config.js檔案，並在裡面配置devServer，直接上程式碼，重啟跑專案

親測有效

// vue.config.js
module.exports = {
    transpileDependencies: ['uview-ui'],
    devServer: {
		    proxy: {
		      '/api': {
		        target: 'https://rivtrust.jz-xxx.xyz/',
				changeOrigin: true,
		        pathRewrite: {
		          '^/apih5': ''
		        }
		      }
		    },
	}
}

2.第二種解決方法：

在src目錄下找到mainfest.json檔案，修改該檔案，點選“原始碼檢視”看到h5

注意：如果開啟“原始碼檢視”後並沒有找到關於h5的配置，這時可以點選“h5配置”，隨便修改下配置，比如設定頁面標題；再去開啟“原始碼檢視”後就會出現關於h5的配置。

// manifest.json
{
    "h5": {
        "devServer": {
            "proxy": {
                 '/api': {
		            target: 'https://rivtrust.jz-xxx.xyz/',
				    changeOrigin: true,
		            pathRewrite: {
		              '^/apih5': ''
		            }
		          }
            }
        }
    }
}

介面呼叫時這麼寫：

注意⚠️以上兩種解決方法不能同時使用；第二種方案會覆蓋第一種解決方法

3.還有一種無需配置：

使用HBuilder X 內建瀏覽器，不存在跨域問題，推薦使用

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。