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

  1. 配置了代理后,请求接口的前面需要拼接/api,可以在封装的接口里面统一处理,可以参考的另一篇博客uni.request的二次封装。
  2. 跨域代理是开发环境生效,所以生产环境需要做相应处理去掉/api,详情可以参考第1点中提到的另一篇博客。
  3. vue3在这里有个坑:之前在用vue2的时候项目根目录新建了一个api文件夹专门管理接口,但是uniapp的vue3项目中,根目录的api文件夹内容在代码中通过import引入的时候,会报错,导致整个项目运行不了,之前遇到这个问题研究了很久才发现。所以vue3项目中建议把api文件夹移到common文件夹中。

关注我,不迷路

如果任何疑问的可以在评论区留言或者私聊。

也可以扫下面二维码加我wx,备注‘地区-名字-技术类型’,我会拉进我的微信技术分享群。注意:必须备注清楚哈。

也可以加QQ群交流:568984539,加群备注‘地区-名字-技术类型’。

uniapp开发:uniapp之vue2、vue3运行至h5请求跨域配置_第1张图片

更多前端、uniapp、nodejs等相关知识可关注我个人博客:https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343

你可能感兴趣的:(uniapp,VUE,小程序,微信小程序,微信)