vue前端解决跨域

最新推荐文章于 2025-02-09 22:05:27 发布

原创最新推荐文章于 2025-02-09 22:05:27 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #vue.js

本文介绍了如何在Vue项目中通过配置vue.config.js解决跨域问题。首先，在项目根目录下创建vue.config.js文件，然后设置devServe选项，启用开放页面及代理配置。将请求路径前缀设置为'/api'，并指定目标服务器地址，允许跨域，同时使用pathRewrite重写规则，将'/api'前缀移除。

目录 vue前端解决跨域

一、第一步
二、第二步

一、第一步

先在和pages.json同级创建一个vue.config.js文件

二、第二步

在这个文件里面写一下代码

module.exports={
	devServe:{
		open:true,   //这个是运行项目直接打开页面
		proxy：{
			"/api"{		//把请求路径前面加上/api 例如：/user 改为/api/user
				target:"",   //解决跨域的路径
				changesOrigion:true,  //允许跨域
				pathRewrite:{  //重写代码  把以api开头改为""
				"^api":"",
				}
			}
		}
	}
}

//  注意  写好代码  要重新启动项目