-
When UniApp is run in the browser, the interface will report a cross-domain error. This is solved in two ways. First: modify the manifest.json source code view that comes with Uniapp and configure h5 settings. Second: Create a new vue.config.js in the project root directory and configure the agent. Just choose one of the two.
-
After modifying or adjusting the configuration file, it is recommended to re-run it to prevent it from taking effect.
-
After the configuration is completed, the request interface is displayedPlease enable JavaScript to continue., you can try restarting the editor (especially HBuilderX), Run the project again. If it still doesn't work, check for other solutions. There are many online.
1. Method 1: Modify the manifest.json file
There is also a similar configuration in UniApp: find manifest.json -> source code view and add the h5 configuration item:
"h5" : {
"devServer" : {
"disableHostCheck" : true,
"proxy" : {
"/api" : {
"target" : "http://www.dzm.com",
"changeOrigin" : true,
"secure" : false,
"ws": false,
"pathRewrite" : {
"^/api" : ""
}
}
}
}
}
2. Method 2: Add vue.config.js file
-
UniApp will recognize thevue.config.js file, butmanifest.json has a higher priority
than vue.config.js file, so just choose a configuration based on your needs. -
Like vue development,manually create a vue.config.js file, and then add the agent. vue.config.js can only Create it in the root directory of the project, otherwise it will not be recognized.
module.exports = {
devServer: {
disableHostCheck: true,
proxy: {
'/api': {
target: 'http://www.dzm.com',
changeOrigin: true,
secure: false,
ws: false,
pathRewrite: {
'^/api': ''
}
}
}
}
}
3. Use
Simple to use
// 请求对象
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)
}
})
Encapsulated into request object request.js
// 接口域名
// #ifdef H5
const BaseHost = '/api'
// #endif
// #ifndef H5
const BaseHost = 'http://www.dzm.com'
// #endif
// 请求封装
export default function ({
// 请求域名
host = BaseHost,
// 请求地址
url,
// 请求方式
method,
// 请求数据
data = {
},
// 请求头
header = {
}
}) {
// 官方请求文档（可查阅传参）https://uniapp.dcloud.io/api/request/request.html
// 转为 Promise 结构
return new Promise((resolve, reject) => {
// 请求对象
uni.request({
url: host + url,
method,
data,
header: Object.assign({
// 默认请求头
'X-Token': uni.getStorageSync('token')
}, header),
success: (res) => {
// 可以在这里进行成功的公共处理
resolve(res)
},
fail: (err) => {
// 可以在这里进行失败的公共处理
reject(err)
}
})
})
}