用uniapp開(kāi)發(fā)APP時(shí)，為了開(kāi)發(fā)方便，經(jīng)常是H5開(kāi)發(fā)好，然后再弄APP的兼容性問(wèn)題。所以可能會(huì)涉及到跨域，此時(shí)也可以讓后端同學(xué)幫忙，但是求人不如自己搞，所以分享一套跨域方法，其實(shí)也是webpack開(kāi)發(fā)vue跨域的方法。廢話不啰嗦，上代碼。兩個(gè)地方都可以配置效果一樣取其一即可，第一個(gè)是vue.config.js,manifest.json源碼

module.exports = {
    // 配置路徑別名
    configureWebpack: {
        devServer: {
            disableHostCheck: true,
            proxy: {
                //配置跨域
                '/api': {
                    target: "http://www.xxx.com/",//轉(zhuǎn)發(fā)的目標(biāo)地址
                    secure : false,
                    changOrigin: true,
                    // pathRewrite: { //是否重寫(xiě) 如果重寫(xiě)的話，本地/api/a1/b1 就回變成/a1/b1 
                    //     '^/api': '' //意思就是把a(bǔ)pi這個(gè)替換成空 ''
                    // }
                }
            }
        }
    }
}

manifest.json源碼視圖直接上截 圖方便理解，再次解釋一下pathRewrite，很多人會(huì)因?yàn)檫@個(gè)導(dǎo)致無(wú)法使用

另外一旦在本地配置了，這個(gè)跨域代理，老是切換開(kāi)發(fā)環(huán)境要變地址，官方也支持開(kāi)發(fā)環(huán)境。

const baseURL = process.env.NODE_ENV === 'development' ? "/api/" : "https://www.正式地址.com/api/";

環(huán)境具體介紹

看到這里其實(shí)有的讀者還是不太明白具體咋搞，或者按照這個(gè)代碼寫(xiě)了還是不能成功使用，再用一些例子幫助你明白具體做了什么操作。
假設(shè)本地端口為localhost:9000，服務(wù)器測(cè)試地址為http://www.xxx.com，直接請(qǐng)求報(bào)跨域錯(cuò)誤。
有兩個(gè)請(qǐng)求的接口為http://www.xxx.com/api/test/t1，http://www.xxx.com/api/test/t2。
一般會(huì)封裝地址，例如function getT1()地址為"text/t1"，function getT2()地址為"text/t2"。
這時(shí)候api/就可以提取出來(lái)作為baseUrl，前面的代理，就可以配置/api 匹配api這個(gè)字段，把這個(gè)字段作為條件，
一旦匹配這個(gè)字段，就把這個(gè)字段的請(qǐng)求地址換成target定義的地址。

現(xiàn)在接口改了有兩個(gè)請(qǐng)求的接口為http://www.xxx.com/api1/test1/t1，http://www.xxx.com/api2/test2/t2，
都不一樣了也沒(méi)有公共字段了，那我要怎么配置代理呢。這時(shí)候就用到pathRewrite，在接口的時(shí)候的時(shí)候認(rèn)為的加一個(gè)識(shí)別標(biāo)簽，然后用重寫(xiě)給他去除后得到實(shí)際地址。代碼如下

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ā)的目標(biāo)地址
? ? ? ? ? ? ? ? ? ? secure : false,
? ? ? ? ? ? ? ? ? ? changOrigin: true,
? ? ? ? ? ? ? ? ? ? pathRewrite: {?
? ? ? ? ? ? ? ? ? ? ? ? '^/devApi': '' //意思就是把devApi這個(gè)替換成空 ''
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

本地請(qǐng)求的localhost:9000/devApi/api1/test1/t1 經(jīng)過(guò)代理變成 http://www.xxx.com/api1/test1/t1

最后的最后，提醒一下，每次修改完配置，一定要記得關(guān)閉重新編譯一下。

附上webpack對(duì)proxy的配置說(shuō)明

到此這篇關(guān)于uniapp使用H5調(diào)試時(shí)跨域問(wèn)題解決的文章就介紹到這了,更多相關(guān)uniapp H5跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論