首页 > 其他分享 >vue3解决跨域问题

vue3解决跨域问题

时间:2024-08-22 09:17:58浏览次数:5  
标签:axios 跨域 修改 api proxy vue3 解决 true

 

vue3登录提示错误

 解决方法
1,修改根目录下 vite.config.ts 文件 

  修改 host、proxy、target,修改后文件如下(红色为修改),具体内容根据后台实际修改

		server: {
			host: 'localhost',
			port: env.VITE_PORT as unknown as number,
			open: JSON.parse(env.VITE_OPEN),
			hmr: true,
			proxy: {
				'/api': {
					target: 'http://localhost:5132/',
					ws: true,
					changeOrigin: true,
					rewrite: (path) => path.replace(/^\/gitee/, ''),
				},
			},
		},

2,修改 axios请求的文件,如request.ts。

  将 axios 实例示例,将baseURL的值与上一步的proxy的值相同

const service: AxiosInstance = axios.create({
	baseURL: '/api',
	timeout: 50000
});

3,修改相应的api函数。  

本文参考:解决Vu3 axios 跨域问题 Vue CORS错误_vue cors error-CSDN博客

标签:axios,跨域,修改,api,proxy,vue3,解决,true
From: https://www.cnblogs.com/glorystar/p/18372994

相关文章

  • Gitlab拉取代码报503错误解决方法
    参考https://blog.csdn.net/fangxiananvhai/article/details/102659875故障现象克隆代码时报503错误'gitclone'hasbeenupdatedinupstreamGittohavecomparablespeedsto'gitlfsclone'.Cloninginto'psy_model_v3'...fatal:unabletoa......
  • 解决Maven编译出错——不再支持源选项 5,请使用 8 或更高版本。
    问题在idea中新建了空maven模组后,尝试启动它默认提供的主方法,编译出错提示:[INFO][INFO]------------------<org.rhythm.test:classloader-test>------------------[INFO]Buildingclassloader-test1.0-SNAPSHOT[INFO]--------------------------------[jar]--------......
  • 043、Vue3+TypeScript基础,pinia库使用action,在函数中对存储数据进行修改
    01、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步:引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步:创建pinia实例constpinia=......
  • 京东面试:mysql分库分表,深度翻页太慢,如何解决
    京东面试:mysql分库分表,深度翻页太慢,如何解决?在40岁老架构师尼恩的读者交流群(50+)中,最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、shein希音、shopee、百度、网易的面试资格,遇到很多很重要的面试题:mysql分库分表,深度翻页太慢,如何解决?分库分表后,分页......
  • [vue3] vue3更新组件流程与diff算法
    在Vue3中,组件的更新通过patch函数进行处理。patch函数源码位置:core/packages/runtime-core/src/renderer.tsatmain·vuejs/core(github.com)constpatch:PatchFn=(n1,n2,container,anchor=null,parentComponent=null,parentSuspen......
  • 042、Vue3+TypeScript基础,pinia库存储数据修改的两种方式
    01、main.ts代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步:引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步:创建pinia实例constpinia=......
  • 分布式事务解决方案
    背景分布式事务,后端开发中比较常见啦。因为在面试的时候,总是有interviewers让我给他普及一下分布式事务,虽然我会的也不多呀但是还是浅浅说一说;今天心血来潮,好好地总结一下分布式事务,希望每一位后端工程师都能彻底理解分布式事务。什么是分布式事务?答:既然是分布式,首先必然是分......
  • 041、Vue3+TypeScript基础,使用pinia库来储存数据
    01、输入npminstallpinia 02、main.js代码如下://引入createApp用于创建Vue实例import{createApp}from'vue'//引入App.vue根组件importAppfrom'./App.vue'//第一步:引入piniaimport{createPinia}from'pinia'constapp=createApp(App);//第二步......
  • 040、Vue3+TypeScript基础,使用nanoid库生成id
    01、使用powershell,输入npminanoid来安装: 02、App.vue代码如下:<template><divclass="app"><h2class="title">App.Vue</h2><Page1/><br><Page2/></div></template><......
  • vue3-基础
    一、创建vue3项目npminitvue@latest二、语法介绍 1.<scriptsetup>语法糖<scriptsetup>constaa='123'constclickFn=()=>{ console.log(123);}</script><template> <div>{{aa}}</div> <button@click=&quo......