uniapp开发：uniapp之vue2、vue3运行至h5请求跨域配置
目录
- 前言
- vue2配置跨域
- vue3配置跨域
- Tips
- 关注我，不迷路
前言
由于浏览器的同源策略，所以h5请求接口，可能存在跨域的情况。
uniapp的vue2版本运行至h5，跨域配置直接在manifest.json的源码视图中配置代理，下面会详细描述。
uniapp的vue3版本运行至h5，跨域配置目前是不支持在manifest.json中配置，vue3使用了vite，需要增加vite.config.js中进行配置代理，下面会详细描述。
vue2配置跨域
在manifest.json的源码视图中配置代理：
"h5": {
"devServer": {
"disableHostCheck": true, //禁止访问本地host文件
"port": 8000, //修改项目端口
"proxy": {
/**配置服务器路径**/
"/api": {
"target": "https://api.xxx.com",// 目标服务器
"changeOrigin": true,
/**重写路径**/
"pathRewrite": {
"^/api": ""
}
}
}
}
}
vue3配置跨域
在项目根目录新建vite.config.js文件，文件中的配置如下：
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
export default defineConfig({
plugins: [
uni()
],
server: {
port: 3000,
proxy: {
'/api': {
target: 'https://api.xxx.com', // 目标服务
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
}
}
}
})
Tips
- 配置了代理后，请求接口的前面需要拼接/api，可以在封装的接口里面统一处理，可以参考的另一篇博客uni.request的二次封装。
- 跨域代理是开发环境生效，所以生产环境需要做相应处理去掉/api，详情可以参考第1点中提到的另一篇博客。
- vue3在这里有个坑：之前在用vue2的时候项目根目录新建了一个api文件夹专门管理接口，但是uniapp的vue3项目中，根目录的api文件夹内容在代码中通过import引入的时候，会报错，导致整个项目运行不了，之前遇到这个问题研究了很久才发现。所以vue3项目中建议把api文件夹移到common文件夹中。
关注我，不迷路
如果任何疑问的可以在评论区留言或者私聊。
也可以扫下面二维码加我wx，备注‘地区-名字-技术类型’，我会拉进我的微信技术分享群。注意：必须备注清楚哈。
也可以加QQ群交流：568984539，加群备注‘地区-名字-技术类型’。
更多前端、uniapp、nodejs等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343