uniapp之Vue2,Vue3配置跨域(代理)

uniapp之Vue2跨域

uniapp项目创建:打开HBuilder编辑器,选择文件,新建项目,选择uni-app,输入项目名称,Vue版本选择Vue2,点击创建即可。
已生成的项目架构里面找到manifest.json文件,通过源码视图的方式打开文件:在文件中添加一下代码即可完成代理:

"h5": {
	"devServer": {
		"disableHostCheck": true, //禁止访问本地host文件
		"port": 8000, //修改项目端口
		"proxy": {
			/**配置服务器路径**/
			"/api": {
				"target": "https://api.xxx.com",// 目标服务器
				"changeOrigin": true,
				/**重写路径**/
				"pathRewrite": {
					"^/api": ""
				}
			}
		}
	}
}

uniapp之Vue3跨域

同上,创建uniapp项目,在项目根目录下面创建一个名为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/, ''),
			}
		}
	}
})

以上方式配置完代理直接发请求即可,请求格式如下

		uni.request({
			url: "/api/wechat/Annualreport/infos",
			method: "GET",
			success: (res) => {
				console.log(res)
			}
		})

你可能感兴趣的:(uniapp,uni-app,vue.js,前端)