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

UniApp 运行到浏览器的时候，接口会跨域报错，这里通过两种方式解决，二选一即可。
修改或调整配置文件后，推荐重新运行，以防不生效。
配置完成后，请求接口显示 Please enable JavaScript to continue. 的话，可以试试重启编辑器（尤其是 HBuilderX），再重新运行项目，如果还是不行就另外查查解决方案吧，网上有很多。

一、方式一：修改 `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 的优先级
要高于 vue.config.js 文件，所以看需求选择一个配置即可。

像 vue 开发一样，手动创建一个 vue.config.js 文件，然后添加上代理，vue.config.js 只能创建在项目的根目录，不然会无法识别到。

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

// 接口域名
// #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)}})})
}

UniApp H5 跨域代理配置并使用（配置manifest.json、vue.config.js）相关推荐

uni-app H5跨域问题解决方案（CORS、Cross-Origin） VUE axios 跨域问题 No ‘Access-Control-Allow-Origin‘ header is pres
原来不同服务器框架要用不同的跨域配置,比如我用的是tomcat就用的是下面这个教程: https://blog.csdn.net/pk694046220/article/details/1038371 ...
【踩坑系列】uniapp之h5 跨域的问题
文章目录 [踩坑系列]uniapp之h5 跨域的问题前言什么是跨域如何解决参考文章 [踩坑系列]uniapp之h5 跨域的问题前言在浏览器上调试移动端的界面,出现不允许出现多个 'Acc ...
Vue-cli中 vue.config.js 的配置详解
1. Vue-cli2 升级到 Vue-cli3+ 1.1 卸载旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x ...
Thinkphp5.1允许uni-app的H5跨域请求接口解决方法
Thinkphp5.1允许uni-app的H5跨域请求接口解决方法参考文章: (1)Thinkphp5.1允许uni-app的H5跨域请求接口解决方法 (2)https://www.cnblogs. ...
vue如何配置服务器端跨域_vue项目里如何配置本地代理实现跨域请求
1.在如图项目配置的index.js文件夹下添加以下一段话微信图片_20180912182204.png proxyTable: { '/rest': { target: 'http://192.1 ...
vue-cli2.x统一配置接口请求地址和开发环境的跨域代理
1.修改config/dev.env.js(开发环境的baseURL地址统一配置) 2.修改config/prod.env.js(线上环境的baseURL地址统一配置) 3.修改config/inde ...
全局配置axios、axios 拦截器和 proxy 跨域代理
目录一.全局配置axios 1. 为什么要全局配置 axios 2. 如何全局配置 axios 3. 在 vue3 的项目中全局配置axios 4. 在 vue2 的项目中全局配置 axios ...
vue3.0-axios拦截器、proxy跨域代理
目录 1. vue-cli 1)vue-cli 2)安装vue-cli ①解决Windows PowerShell不识别vue命令的问题 3)创建项目 4)基于vue ui创建vue项目 5)基于命令 ...
【react 跨域代理】
react 跨域代理提示:以下是本篇文章正文内容,下面案例可供参考一.package.json 里添加"proxy": "http://localhost:5000& ...

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

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

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

三、使用

UniApp H5 跨域代理配置并使用（配置manifest.json、vue.config.js）相关推荐

最新文章

热门文章

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

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

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

三、使用

UniApp H5 跨域代理配置并使用（配置manifest.json、vue.config.js）相关推荐

最新文章

热门文章

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

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