关于vue 使用axios（已配置好代理等）请求接口还是报404问题

最新推荐文章于 2024-09-20 16:29:25 发布

原创最新推荐文章于 2024-09-20 16:29:25 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文详细介绍了在前端开发中如何配置代理，以解决跨域问题。通过示例展示了针对多个不同API接口的代理设置，如'/blog'、'/music'等，确保axios请求URL不包含其他代理路径。理解并正确使用这些配置可以优化开发流程，提高开发效率。

proxy: {
			'/blog': {
				target: 'http://localhost:8099', //API服务器的地址
				ws: true, //代理websockets
				changeOrigin: true, // 是否跨域，虚拟的站点需要更管origin
				pathRewrite: {
					// '^/api'是一个正则表达式，表示要匹配请求的url中，全部'http://localhost:8081/api' 转接为 http://localhost:8081/
					'^/blog': '',
				}
			},
			'/music':{
				target: 'http://cloud-music.pl-fe.cn',
				ws: true,
				changeOrigin: true,
				pathRewrite: {
					'^/music':'',
				}
			},
			'/free':{
				target:'https://v.api.aa1.cn/api',
				//ws:true,
				changeOrigin:true,
				pathRewrite:{
					'^/free':'',
				}
			},
			'/yk':{
				target:'https://api.iyk0.com',
				changeOrigin:true,
				pathRewrite:{
					'^/yk':'',
				}
			},
			'/mxg':{
				target:'https://api.muxiaoguo.cn/api',
				changeOrigin:true,
				pathRewrite:{
					'^/mxg':'',
				}
			}

问题解决：axios的请求url，不能包含有其他代理的名字，比如说我调用第一个代理接口blog，路径中就不能有其他的代理名称（不能含有/yk/或者/free/或者/music/）