Vue 配置代理

cc_xxo

已于 2022-03-05 00:54:46 修改

阅读量279

点赞数

文章标签： vue.js 前端 javascript

于 2022-03-03 22:54:04 首次发布

本文链接：https://blog.youkuaiyun.com/cc_xxo/article/details/123239678

版权

本文介绍了如何在Vue项目中安装axios，并在vue.config.js配置文件中设置代理，以解决前端跨域请求的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm i axios
在vue.config.js文件中添加

//开启代理服务器 方式一
devServer: {
 	proxy: 'http://localhost:5000'
}
//开启代理服务器 方式二
devServer: {
	proxy: {
		'/prefix': {	//请求前缀 以此为前缀的请求都是访问外部
			target: 'http://localhost:5000',
			pathRewrite: {'^/prefix': ''},	//发送请求时把前缀去掉
			ws: true,	//用于支持websocket
			changeOrigin: true	//用于控制请求中的host值
		},
		'/demo': {	//请求前缀 以此为前缀的请求都是访问外部
			target: 'http://localhost:5000',
			pathRewrite: {'^/demo': ''},	//发送请求时把前缀去掉
			ws: true,	//用于支持websocket
			changeOrigin: true	//用于控制请求中的host值
		}
	}
}

引入 import axios from ‘axios’
发送请求

getStudents(){
	axios.get('http://localhost:8080/text.text').then(
		response => {
			console.log('请求成功了',response.data)
		},
		error => {
			console.log('请求失败了',error.message)
		}
	)
}