uniapp使用H5調試時跨域問題解決

Posted on by

用uniapp開發APP時，為瞭開發方便，經常是H5開發好，然後再弄APP的兼容性問題。所以可能會涉及到跨域，此時也可以讓後端同學幫忙，但是求人不如自己搞，所以分享一套跨域方法，其實也是webpack開發vue跨域的方法。廢話不囉嗦，上代碼。兩個地方都可以配置效果一樣取其一即可，第一個是vue.config.js,manifest.json源碼

module.exports = {
    // 配置路徑別名
    configureWebpack: {
        devServer: {
            disableHostCheck: true,
            proxy: {
                //配置跨域
                '/api': {
                    target: "http://www.xxx.com/",//轉發的目標地址
                    secure : false,
                    changOrigin: true,
                    // pathRewrite: { //是否重寫 如果重寫的話，本地/api/a1/b1 就回變成/a1/b1 
                    //     '^/api': '' //意思就是把api這個替換成空 ''
                    // }
                }
            }
        }
    }
}

manifest.json源碼視圖直接上截 圖方便理解，再次解釋一下pathRewrite，很多人會因為這個導致無法使用

另外一旦在本地配置瞭，這個跨域代理，老是切換開發環境要變地址，官方也支持開發環境。

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定義的地址。

現在接口改瞭有兩個請求的接口為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/",//轉發的目標地址
                    secure : false,
                    changOrigin: true,
                    pathRewrite: { 
                        '^/devApi': '' //意思就是把devApi這個替換成空 ''
                    }
                }
            }
        }
    }
}

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

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

附上webpack對proxy的配置說明

到此這篇關於uniapp使用H5調試時跨域問題解決的文章就介紹到這瞭,更多相關uniapp H5跨域內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：