uniapp踩坑：編譯H5解決瀏覽器跨域問題

uniapp編譯到app是不存在跨域問題的，但是編譯到H5就會有跨域問題。記錄一下工作中遇到跨域及解決跨域方法

方法一： 直接編譯Hbuilder內置瀏覽器，能解決跨域，但是內置瀏覽器調試沒有谷歌爽

方法二： 在manifest.json文件中配置跨域，該方法類似vue.config.js中的devServer

 

• 步驟一

"h5" : {
    "devServer" : {
        "disableHostCheck" : true, // 開啓可以用自己的域名
        "proxy": {
          "/api": {
            "target": "https://www.test.com",
            "changeOrigin" : true,
            "secure" : false,
            "pathRewrite": { //匹配請求路徑裏面有 /api 會替換成https://www.test.com
            // 舉例：/api/api/user => https://www.test.com/api/user
              "^/api": ""
            }
          }
        }
    }
}

• 步驟二 很重要，很多人配置了步驟一沒效果，因爲步驟二沒配置好

  就是接口請求的時候，域名要改爲/api，不能是正式域名，因爲pathReweite已經幫你轉了
  舉個栗子
  baseUrl = process.env.NODE_ENV === 'development' ? '/api' : 'https://www.test.com'
  然後uni.request請求的url應該是這樣：baseUrl + '/user/info'
  
  然後瀏覽器看到的請求地址應該是
  http://localhost:8080/user/info

   

方法三 ：直接在項目根目錄創建一個vue.config.js文件，配置跟方法二一樣