# uniapp踩坑：編譯H5解決瀏覽器跨域問題 ~~~ uniapp編譯到app是不存在跨域問題的，但是編譯到H5就會有跨域問題。記錄一下工作中遇到跨域及解決跨域方法 復制代碼 ~~~ ## 方法一： 直接編譯Hbuilder內置瀏覽器，能解決跨域，但是內置瀏覽器調試沒有谷歌爽 ## 方法二： 在manifest.json文件中配置跨域，該方法類似vue.config.js中的devServer ### 步驟一 ~~~javascript "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文件，配置跟方法二一樣 ~~~ 該方法跟2一樣的，uniapp會識別這個vue.config.js文件，不過manifest.json的優先級 要高于vue.config.js文件 ~~~