封装发送请求代码，配置代理服务器（vue中，uniapp中也能使用）

本文链接：https://blog.csdn.net/weixin_48952990/article/details/125935681

本文介绍了在vue和uniapp项目中如何封装发送请求的代码，并详细讲解了配置代理服务器来解决跨域问题的方法。在项目的utils目录下创建request.js和config.js，分别用于封装请求函数和设置URL。通过在vue.config.js中配置代理服务器，可以解决在H5项目中的跨域问题。在使用代理后，需要更新request.js中请求的URL，并在发送请求时添加/api前缀。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中新建utils来保存封装发送请求功能的文件
其中request.js用来封装发送请求的功能函数
config.js用来封装发送请求的url地址

request.js

// 封装发请求方法
import config from './config'
export default(url,data={},method='GET')=>{
	return new Promise((resolve,reject)=>{
		// 执行异步任务
		wx.request({
			url:config.host+url,
			data,
			method,
			success:(res)=>{
				resolve(res.data)
			},
			fail:(err)=>{
				reject(err)
			}
		})
	})
}

config.js

// 和url相关的
export default {
	host:'http://localhost:3001'
}

发送请求的时候，可能会存在跨域问题，在小程序中不存在这个问题，但是在h5的项目中可能会存在，所以需要配置代理服务器来解决这个问题
配置代理服务器（vue中，uniapp中也能使用）
在项目中新建vue.config.js文件，在里面配置代理
在这里插入图片描述

//配置代理服务器
module.exports = {
  devServer: {
    proxy: {
    // /api是接头暗号，给devServer配置标识
      '/api': {
        target: 'http://localhost:3001', //代理地址
        ws: true,
        changeOrigin: true,
        pathRewrite:{//路径重写
        	'^/api':''
      },
      //可配置多个代理服务器
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}