uniapp使用H5調(diào)試時跨域問題解決

更新時間：2022年07月27日 15:39:56 作者：冰涼冰涼

本文主要介紹了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/",//轉發(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/";

環(huán)境具體介紹

看到這里其實有的讀者還是不太明白具體咋搞，或者按照這個代碼寫了還是不能成功使用，再用一些例子幫助你明白具體做了什么操作。
假設本地端口為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/",//轉發(fā)的目標地址
? ? ? ? ? ? ? ? ? ? secure : false,
? ? ? ? ? ? ? ? ? ? changOrigin: true,
? ? ? ? ? ? ? ? ? ? pathRewrite: {?
? ? ? ? ? ? ? ? ? ? ? ? '^/devApi': '' //意思就是把devApi這個替換成空 ''
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

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

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

附上webpack對proxy的配置說明

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

您可能感興趣的文章: