vue通过反向代理设置解决http跨域请求问题

最新推荐文章于 2025-06-26 04:59:00 发布

xszivvvv

最新推荐文章于 2025-06-26 04:59:00 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue http 反向代理跨域文章标签： vue 反向代理 proxyTable 跨域 http

本文链接：https://blog.youkuaiyun.com/weixin_41855143/article/details/82743766

vue 同时被 3 个专栏收录

6 篇文章

订阅专栏

http

2 篇文章

订阅专栏

反向代理

1 篇文章

订阅专栏

本文介绍了如何使用Vue CLI项目的反向代理解决跨域问题。通过设置proxyTable属性，可以将前端请求代理到指定的后端接口，从而避免跨域限制。文章详细说明了配置步骤并给出了示例。

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

在没有接触到反向代理之前，常常通过服务器端设置允许跨域的方式来解决跨域问题，这在生产环境容易发生安全问题。最近通过项目了解到反向代理这个方法来解决跨域问题。
反向代理的概念：

反向代理（Reverse Proxy）实际运行方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。

在vue-cli构建的项目中设置反向代理：
1、找到./config/index.js文件中找到proxyTable属性，如图

2、按如下方式设置

proxyTable: {
	'/api':{
		target: 'http://www.baidu.com', // 发送请求的后台接口
		changeOrigin: true,
		secure: false,  // 如果是https接口，需设置secure为false
		pathRewrite:{ 
			'^/api': '' // 用/api代替后端接口路径
		}
	}
}

3、发送请求

前端：
     发送get请求,请求url为'/api/information'
代理服务器：
     转发get请求，请求url为'http://www.baidu.com/information'

vue的反向代理设置proxyTable属性是webpack中的proxy属性，日后需要研究代理服务器设置，参考webpack的proxy配置

参考文档：
正向代理与反向代理