本篇文章給大家?guī)砹岁P(guān)于uniapp跨域的相關(guān)知識,其中介紹了為什么會有跨域問題,這是瀏覽器的一種安全保護(hù)機(jī)制,一起來看一下相關(guān)的問題吧,希望對大家有幫助。
推薦:《uniapp教程》
為什么會有跨域問題?
由于瀏覽器的同源策略導(dǎo)致的,是瀏覽器的一種安全保護(hù)機(jī)制。
瀏覽器從一個域名的網(wǎng)頁去請求另一個域名的資源時,協(xié)議、域名、端口 任一不同,都是跨域
解決uniapp的跨域問題有很多方式,下面總結(jié)一下常用的幾種方式
1. 使用 jsonp,可在我們封裝的網(wǎng)絡(luò)通訊中添加
dataType:'jsonp'
總結(jié):
但是此種方式僅支持 get 請求,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é):
此種方式雖然沒有其它方式靈活,但是 是最適用于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é):
此種配置方式,可能會沒用,因?yàn)?vue.config.js 是 vue3 才有的, vue2 配置 vue.config.js 是無效的??梢栽?manifest.json 文件內(nèi)通過 vueVersion 字段來查看 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)做過跨域處理
(2). 下載Google瀏覽器一個可支持跨域的拓展程序:https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
具體可參照:https://ask.dcloud.net.cn/article/35267
推薦:《uniapp熱門教程》