uniapp项目webpack-dev-server本地代理解决跨域+uni.request请求封装

成长中的向日葵

已于 2024-08-27 09:27:42 修改

阅读量1.5k

点赞数

分类专栏： uniapp 文章标签： uni-app vue.js javascript

于 2022-11-18 09:06:57 首次发布

本文链接：https://blog.csdn.net/ssophia/article/details/127915357

版权

uniapp 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

本文介绍了如何在uniapp项目中通过创建vue.config.js进行反向代理解决跨域问题，并详细讲解了在common目录下封装uni.request的方法，以便在vue文件中便捷地进行网络请求。

摘要由CSDN通过智能技术生成

    我的项目是用vue2+uniapp开发的，遇到了跨域问题，上篇文章使用了浏览器端解决跨域问题，但是始终觉得不够完美，于是又百度了很多资料，终于解决了。亲测可用，直接上干货。

1.在根目录下新建vue.config.js文件

module.exports = {
	"devServer": {
		"port": 3264, //浏览器运行端口
		"https": false,
		"proxy": {
			"/xboot": {
				"target": "http://xx.xx.xxx.xxx:8082/xboot",//后台地址
				"changeOrigin": true,
				"secure": false,
				"pathRewrite": {
					"^/xboot": ""
				}
			}
		}
	}
}

2·在common 下新建request.js文件

import App from '../App.vue'
const request = (
	url = '', date = {}, method = 'POST') => {
	return new Promise((resolve, reject) => {
		let header = {
			'content-type': 'application/x-www-form-urlencoded'
		}
		const accessToken = uni.getStorageSync('accessToken')
		let url1 = '/xboot' + url;
		if (accessToken !== undefined && accessToken !== '') {
			header.accessToken = accessToken
		}
		uni.request({
			method: method,
			// #ifdef H5
			url: url1, //H5下
			// #endif
			// #ifndef H5
			url: `${App.globalData.baseUrl}${url}`, //非H5下（即APP下）
			// #endif
			data: date,
			header: header,
			dataType: 'json',
		}).then((response) => {
			setTimeout(function() {
				uni.hideLoading();
			}, 200);
			let [error, res] = response;
			resolve(res.data);
		}).catch(error => {
			let [err, res] = error;
			reject(err)
		})
	});
}
export default request

3·vue文件中使用

this.request('/login', data)
					.then(res => {
						if (res.success) {
							uni.setStorageSync("accessToken", res.result);
							this.request('/user/info', '', 'GET').then((res) => {
							})
							uni.switchTab({
								url: '/pages/me/me'
							});
						} else {
						}
					})