uniapp使用H5調(diào)試時跨域問題解決
用uniapp開發(fā)APP時，為了開發(fā)方便，經(jīng)常是H5開發(fā)好，然后再弄APP的兼容性問題。所以可能會涉及到跨域，此時也可以讓后端同學幫忙，但是求人不如自己搞，所以分享一套跨域方法，其實也是webpack開發(fā)vue跨域的方法。廢話不啰嗦，上代碼。兩個地方都可以配置效果一樣取其一即可，第一個是vue.config.js,manifest.json源碼
module.exports = {
// 配置路徑別名
configureWebpack: {
devServer: {
disableHostCheck: true,
proxy: {
//配置跨域
'/api': {
target: "http://www.xxx.com/",//轉(zhuǎn)發(fā)的目標地址
secure : false,
changOrigin: true,
// pathRewrite: { //是否重寫 如果重寫的話，本地/api/a1/b1 就回變成/a1/b1
// '^/api': '' //意思就是把api這個替換成空 ''
// }
}
}
}
}
}manifest.json源碼視圖直接上截 圖方便理解，再次解釋一下pathRewrite，很多人會因為這個導致無法使用
另外一旦在本地配置了，這個跨域代理，老是切換開發(fā)環(huán)境要變地址，官方也支持開發(fā)環(huán)境。
const baseURL = process.env.NODE_ENV === 'development' ? "/api/" : "https://www.正式地址.com/api/";
看到這里其實有的讀者還是不太明白具體咋搞，或者按照這個代碼寫了還是不能成功使用，再用一些例子幫助你明白具體做了什么操作。
假設本地端口為localhost:9000，服務器測試地址為http://www.xxx.com，直接請求報跨域錯誤。
有兩個請求的接口為http://www.xxx.com/api/test/t1，http://www.xxx.com/api/test/t2。
一般會封裝地址，例如function getT1()地址為"text/t1"，function getT2()地址為"text/t2"。
這時候api/就可以提取出來作為baseUrl，前面的代理，就可以配置/api 匹配api這個字段，把這個字段作為條件，
一旦匹配這個字段，就把這個字段的請求地址換成target定義的地址。
現(xiàn)在接口改了有兩個請求的接口為http://www.xxx.com/api1/test1/t1，http://www.xxx.com/api2/test2/t2，
都不一樣了也沒有公共字段了，那我要怎么配置代理呢。這時候就用到pathRewrite，在接口的時候的時候認為的加一個識別標簽，然后用重寫給他去除后得到實際地址。代碼如下
const baseURL = process.env.NODE_ENV === 'development' ? "/devApi/" : "https://www.正式地址.com/api/";//人為的在baseUrl中加入devApi
vue.config.js
module.exports = {
? ? // 配置路徑別名
? ? configureWebpack: {
? ? ? ? devServer: {
? ? ? ? ? ? disableHostCheck: true,
? ? ? ? ? ? proxy: {
? ? ? ? ? ? ? ? //配置跨域
? ? ? ? ? ? ? ? '/devApi': {
? ? ? ? ? ? ? ? ? ? target: "http://www.xxx.com/",//轉(zhuǎn)發(fā)的目標地址
? ? ? ? ? ? ? ? ? ? secure : false,
? ? ? ? ? ? ? ? ? ? changOrigin: true,
? ? ? ? ? ? ? ? ? ? pathRewrite: {?
? ? ? ? ? ? ? ? ? ? ? ? '^/devApi': '' //意思就是把devApi這個替換成空 ''
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}本地請求的localhost:9000/devApi/api1/test1/t1 經(jīng)過代理變成 http://www.xxx.com/api1/test1/t1
最后的最后，提醒一下，每次修改完配置，一定要記得關閉重新編譯一下。
到此這篇關于uniapp使用H5調(diào)試時跨域問題解決的文章就介紹到這了,更多相關uniapp H5跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
深入理解Canvas模糊問題產(chǎn)生的原因與解決辦法
JS實現(xiàn)網(wǎng)頁搶購功能（觸發(fā)，終止腳本）
javascript從右邊截取指定字符串的三種實現(xiàn)方法
javascript調(diào)試之DOM斷點調(diào)試法使用技巧分享
