UniApp H5 跨域代理配置并利用（配置manifest.json、vue.config.js） ...

• UniApp 运行到浏览器的时间，接口会跨域报错，这里通过两种方式解决，第一：修改Uniapp自带的manifest.json 源码视图并举行配置h5设置。第二：在项目根目录新建vue.config.js并配置代理。 二选一即可。
  
• 修改或调解配置文件后，保举重新运行，以防不生效。
  
• 配置完成后，请求接口表现 Please enable JavaScript to continue. 的话，可以试试重启编辑器（尤其是 HBuilderX），再重新运行项目，如果还是不可就另外查查解决方案吧，网上有许多。
  

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

在 UniApp 也有类似配置的地方：找到 manifest.json -》源码视图，添加 h5 配置项：

1. "h5" : {
2.     "devServer" : {
3.         "disableHostCheck" : true,
4.         "proxy" : {
5.             "/api" : {
6.                 "target" : "http://www.dzm.com",
7.                 "changeOrigin" : true,
8.                 "secure" : false,
9.                 "ws": false,
10.                 "pathRewrite" : {
11.                     "^/api" : ""
12.                 }
13.             }
14.         }
15.     }
16. }

复制代码

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

• UniApp 会辨认 vue.config.js 文件，但是 manifest.json 的优先级
  要高于 vue.config.js 文件，所以看需求选择一个配置即可。
  
• 像 vue 开发一样，手动创建一个 vue.config.js 文件，然后添加上代理，vue.config.js 只能创建在项目的根目录，不然会无法辨认到。
  

1. module.exports = {
2.     devServer: {
3.         disableHostCheck: true,
4.         proxy: {
5.             '/api': {
6.                 target: 'http://www.dzm.com',
7.                 changeOrigin: true,
8.                 secure: false,
9.                 ws: false,
10.                 pathRewrite: {
11.                     '^/api': ''
12.                 }
13.             }
14.         }
15.     }
16. }

复制代码

三、利用

简朴利用

1. // 请求对象
2. uni.request({
3.     url: '/api' + '/mobile/user/userinfo',
4.     method: 'GET',
5.     data: {},
6.     header: {
7.         'X-Token': uni.getStorageSync('token')
8.     },
9.     success: (res) => {
10.         // 请求成功
11.         console.log(res)
12.     },
13.     fail: (err) => {
14.         // 请求失败
15.         console.log(err)
16.     }
17. })

复制代码

封装成请求对象 request.js

1. // 接口域名
2. // #ifdef H5
3. const BaseHost = '/api'
4. // #endif
5. // #ifndef H5
6. const BaseHost = 'http://www.dzm.com'
7. // #endif
8. // 请求封装
9. export default function ({
10.     // 请求域名
11.     host = BaseHost,
12.     // 请求地址
13.     url,
14.     // 请求方式
15.     method,
16.     // 请求数据
17.     data = {},
18.     // 请求头
19.     header = {}
20. }) {
21.     // 官方请求文档（可查阅传参）https://uniapp.dcloud.io/api/request/request.html
22.     // 转为 Promise 结构
23.     return new Promise((resolve, reject) => {
24.         // 请求对象
25.         uni.request({
26.             url: host + url,
27.             method,
28.             data,
29.             header: Object.assign({
30.                 // 默认请求头
31.                 'X-Token': uni.getStorageSync('token')
32.             }, header),
33.             success: (res) => {
34.                 // 可以在这里进行成功的公共处理
35.                 resolve(res)
36.             },
37.             fail: (err) => {
38.                 // 可以在这里进行失败的公共处理
39.                 reject(err)
40.             }
41.         })
42.     })
43. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。