• UniApp 運行到瀏覽器的時候，接口會跨域報錯，這里通過兩種方式解決，第一：修改Uniapp自帶的manifest.json 源碼視圖并進行配置h5設(shè)置。第二：在項目根目錄新建vue.config.js并配置代理。 二選一即可。

• 修改或調(diào)整配置文件后，推薦重新運行，以防不生效。

• 配置完成后，請求接口顯示 Please enable JavaScript to continue. 的話，可以試試重啟編輯器（尤其是 HBuilderX），再重新運行項目，如果還是不行就另外查查解決方案吧，網(wǎng)上有很多。

一、方式一：修改 manifest.json 文件

在 UniApp 也有類似配置的地方：找到 manifest.json -》源碼視圖，添加 h5 配置項：

"h5" : {
    "devServer" : {
        "disableHostCheck" : true,
        "proxy" : {
            "/api" : {
                "target" : "http://www.dzm.com",
                "changeOrigin" : true,
                "secure" : false,
                "ws": false,
                "pathRewrite" : {
                    "^/api" : ""
                }
            }
        }
    }
}

二、方式二：添加 vue.config.js 文件

• UniApp 會識別 vue.config.js 文件，但是 manifest.json 的優(yōu)先級
  要高于 vue.config.js 文件，所以看需求選擇一個配置即可。

• 像 vue 開發(fā)一樣，手動創(chuàng)建一個 vue.config.js 文件，然后添加上代理，vue.config.js 只能創(chuàng)建在項目的根目錄，不然會無法識別到。

module.exports = {
    devServer: {
        disableHostCheck: true,
        proxy: {
            '/api': {
                target: 'http://www.dzm.com',
                changeOrigin: true,
                secure: false,
                ws: false,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

三、使用

簡單使用

// 請求對象
uni.request({
    url: '/api' + '/mobile/user/userinfo',
    method: 'GET',
    data: {},
    header: {
        'X-Token': uni.getStorageSync('token')
    },
    success: (res) => {
        // 請求成功
        console.log(res)
    },
    fail: (err) => {
        // 請求失敗
        console.log(err)
    }
})

封裝成請求對象 request.js文章來源地址http://www.zghlxwxcb.cn/news/detail-792765.html

// 接口域名
// #ifdef H5
const BaseHost = '/api'
// #endif
// #ifndef H5
const BaseHost = 'http://www.dzm.com'
// #endif
// 請求封裝
export default function ({
    // 請求域名
    host = BaseHost,
    // 請求地址
    url,
    // 請求方式
    method,
    // 請求數(shù)據(jù)
    data = {},
    // 請求頭
    header = {}
}) {
    // 官方請求文檔（可查閱傳參）https://uniapp.dcloud.io/api/request/request.html
    // 轉(zhuǎn)為 Promise 結(jié)構(gòu)
    return new Promise((resolve, reject) => {
        // 請求對象
        uni.request({
            url: host + url,
            method,
            data,
            header: Object.assign({
                // 默認(rèn)請求頭
                'X-Token': uni.getStorageSync('token')
            }, header),
            success: (res) => {
                // 可以在這里進行成功的公共處理
                resolve(res)
            },
            fail: (err) => {
                // 可以在這里進行失敗的公共處理
                reject(err)
            }
        })
    })
}

到了這里，關(guān)于UniApp H5 跨域代理配置并使用（配置manifest.json、vue.config.js）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！