帶你搞懂uniapp跨域問(wèn)題（實(shí)例詳解）
Feb 25, 2022 pm 05:57 PM
本篇文章給大家?guī)?lái)了關(guān)于uniapp跨域的相關(guān)知識(shí)，其中介紹了為什么會(huì)有跨域問(wèn)題，這是瀏覽器的一種安全保護(hù)機(jī)制，一起來(lái)看一下相關(guān)的問(wèn)題吧，希望對(duì)大家有幫助。
推薦：《uniapp教程》
為什么會(huì)有跨域問(wèn)題？
由于瀏覽器的同源策略導(dǎo)致的，是瀏覽器的一種安全保護(hù)機(jī)制。
瀏覽器從一個(gè)域名的網(wǎng)頁(yè)去請(qǐng)求另一個(gè)域名的資源時(shí)，協(xié)議、域名、端口 任一不同，都是跨域
解決uniapp的跨域問(wèn)題有很多方式，下面總結(jié)一下常用的幾種方式
1. 使用 jsonp，可在我們封裝的網(wǎng)絡(luò)通訊中添加
dataType:'jsonp'
總結(jié)：
但是此種方式僅支持 get 請(qǐng)求，post好像用不了。
具體可參考：https://www.imooc.com/article/291931
2. 在uniapp根目錄下的 manifest.json 添加
"h5":?{
"devServer":?{
"proxy":?{
"/8888":?{
"target":?"https://www.baidu.com/api",
"changeOrigin":?true,
"pathRewrite":?{
"^/8888":?"/"
}
},
"/8800":?{
"target":?"https://www.taobao.com/api",
"changeOrigin":?true,
"pathRewrite":?{
"^/8800":?""
}
}
}
}},
總結(jié)：
此種方式雖然沒(méi)有其它方式靈活，但是 是最適用于uniapp的，畢竟是官方提供的配置文件。
具體參照：https://uniapp.dcloud.io/collocation/manifest?id=h5
3. uniapp根目錄下新建文件 vue.config.js ,然后在里面添加
module.exports?=?{
??devServer:?{
????proxy:?{
??????'/dev':?{
????????target:?'https://www.baidu.com/api',
????????changeOrigin:?true,
????????pathRewrite:?{
??????????'^/dev':?''
????????}
??????}
????},
??}}
總結(jié)：
此種配置方式，可能會(huì)沒(méi)用，因?yàn)?vue.config.js 是 vue3 才有的， vue2 配置 vue.config.js 是無(wú)效的?？梢栽?manifest.json 文件內(nèi)通過(guò) vueVersion 字段來(lái)查看 vue 版本。如下圖： 
具體參照：https://cli.vuejs.org/zh/config/#devserver-proxy
如果是 vue2 配置跨域，可參照 ：https://blog.csdn.net/weixin_45679977/article/details/103004678
4. 解除Google瀏覽器的跨域限制
TASKKILL?/F?/IM?chrome.exe
start?chrome.exe?--args?--disable-web-security?--user-data-dir
pause
總結(jié)：
記得重啟瀏覽器
具體參照：https://blog.csdn.net/MisTTT/article/details/75976123
5. 其它方式
(1). 直接運(yùn)行在 hbuilderx 的內(nèi)置瀏覽器內(nèi)，uniapp官方在內(nèi)置瀏覽器內(nèi)做過(guò)跨域處理
(2). 下載Google瀏覽器一個(gè)可支持跨域的拓展程序：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
具體可參照：https://ask.dcloud.net.cn/article/35267
推薦：《uniapp熱門(mén)教程》
以上是帶你搞懂uniapp跨域問(wèn)題（實(shí)例詳解）的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
uniapp有什么缺點(diǎn)
Apr 06, 2024 am 04:06 AM
UniApp 作為跨平臺(tái)開(kāi)發(fā)框架擁有諸多便利，但缺點(diǎn)也較為明顯：性能受限于混合開(kāi)發(fā)模式，導(dǎo)致打開(kāi)速度、頁(yè)面渲染和交互響應(yīng)較差。生態(tài)系統(tǒng)不完善，特定領(lǐng)域組件和庫(kù)較少，限制創(chuàng)意發(fā)揮和復(fù)雜功能實(shí)現(xiàn)。不同平臺(tái)的兼容性問(wèn)題，易出現(xiàn)樣式差異和 API 支持不一致的情況。WebView 的安全機(jī)制不同于原生應(yīng)用，可能降低應(yīng)用安全性。同時(shí)支持多個(gè)平臺(tái)的應(yīng)用發(fā)布更新需要多次編譯打包，增加開(kāi)發(fā)和維護(hù)成本。
uniapp和flutter有什么區(qū)別
Apr 06, 2024 am 04:30 AM
UniApp 基于 Vue.js，F(xiàn)lutter 基于 Dart，兩者都支持跨平臺(tái)開(kāi)發(fā)。UniApp 提供豐富的組件和簡(jiǎn)易開(kāi)發(fā)，但性能受限于 WebView；Flutter 使用原生渲染引擎，性能優(yōu)異，但開(kāi)發(fā)難度較高。UniApp 擁有活躍的中文社區(qū)，F(xiàn)lutter 擁有龐大且全球化的社區(qū)。UniApp 適合快速開(kāi)發(fā)、性能要求不高的場(chǎng)景；Flutter 適合定制化程度高、高性能的復(fù)雜應(yīng)用。
webstorm開(kāi)發(fā)uniapp項(xiàng)目如何啟動(dòng)預(yù)覽
Apr 08, 2024 pm 06:42 PM
在 WebStorm 中啟動(dòng) UniApp 項(xiàng)目預(yù)覽的步驟：安裝 UniApp 開(kāi)發(fā)工具插件連接到設(shè)備設(shè)置 WebSocket啟動(dòng)預(yù)覽
uniapp和mui哪個(gè)好
Apr 06, 2024 am 05:18 AM
總體而言，需復(fù)雜原生功能時(shí)，uni-app 更好；需簡(jiǎn)單或高度自定義界面時(shí)，MUI 更好。此外，uni-app 具備：1. Vue.js/JavaScript 支持；2. 豐富原生組件/API；3. 良好生態(tài)系統(tǒng)。缺點(diǎn)是：1. 性能問(wèn)題；2. 定制界面困難。MUI 具備：1. Material Design 支持；2. 高度靈活性；3. 廣泛組件/主題庫(kù)。缺點(diǎn)是：1. CSS 依賴(lài)；2. 不提供原生組件；3. 生態(tài)系統(tǒng)較小。
解決UniApp報(bào)錯(cuò)：無(wú)法找到'xxx'動(dòng)畫(huà)效果的問(wèn)題
Nov 25, 2023 am 11:43 AM
解決UniApp報(bào)錯(cuò)：無(wú)法找到'xxx'動(dòng)畫(huà)效果的問(wèn)題UniApp是一種基于Vue.js框架的跨平臺(tái)應(yīng)用開(kāi)發(fā)框架，可以用于開(kāi)發(fā)微信小程序、H5、App等多個(gè)平臺(tái)的應(yīng)用。在開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)使用到動(dòng)畫(huà)效果來(lái)提升用戶(hù)體驗(yàn)。然而，有時(shí)候會(huì)遇到一個(gè)報(bào)錯(cuò)：無(wú)法找到'xxx'動(dòng)畫(huà)效果。這個(gè)報(bào)錯(cuò)會(huì)導(dǎo)致動(dòng)畫(huà)無(wú)法正常運(yùn)行，給開(kāi)發(fā)帶來(lái)不便。本文將介紹幾種解決這個(gè)問(wèn)題的方法。
uniapp和原生開(kāi)發(fā)哪個(gè)好
Apr 06, 2024 am 05:06 AM
在 UniApp 和原生開(kāi)發(fā)之間選擇時(shí)，應(yīng)考慮開(kāi)發(fā)成本、性能、用戶(hù)體驗(yàn)和靈活性。UniApp 優(yōu)勢(shì)在于跨平臺(tái)開(kāi)發(fā)、快速迭代、易于學(xué)習(xí)和內(nèi)置插件，而原生開(kāi)發(fā)則在性能、穩(wěn)定性、原生體驗(yàn)和可擴(kuò)展性方面更勝一籌。根據(jù)特定項(xiàng)目需求權(quán)衡利弊，初學(xué)者適合 UniApp，追求高性能和無(wú)縫體驗(yàn)的復(fù)雜應(yīng)用適合原生開(kāi)發(fā)。
uniapp用什么開(kāi)發(fā)工具
Apr 06, 2024 am 04:27 AM
UniApp使用HBuilder X作為官方開(kāi)發(fā)工具，該IDE集成了代碼編輯器、調(diào)試器、模擬器和豐富的插件，為跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)提供全面的支持。
學(xué)uniapp需要哪些基礎(chǔ)
Apr 06, 2024 am 04:45 AM
uniapp開(kāi)發(fā)需要以下基礎(chǔ)：前端技術(shù)（HTML、CSS、JavaScript）移動(dòng)開(kāi)發(fā)知識(shí)（iOS和Android平臺(tái)）Node.js其他基礎(chǔ)（版本控制工具、IDE、移動(dòng)開(kāi)發(fā)模擬器或真機(jī)調(diào)試經(jīng)驗(yàn)）
