解决vue本地调试线上的接口时报跨域的问题

最新推荐文章于 2026-04-03 11:21:15 发布

原创最新推荐文章于 2026-04-03 11:21:15 发布 · 1.9k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

收录于

本文介绍了如何在Vue项目中通过vue.config.js设置，实现内网穿透调试和API代理，包括开启调试服务器、指定代理端口、配置跨域以及重写路径。

在vue.config.js文件下设置

代码：

module.exports = {
	// 配置路径别名
	configureWebpack: {
		devServer: {
			// 调试时允许内网穿透，让外网的人访问到本地调试的H5页面
			disableHostCheck: true,
			
			/////////本地调试时打开
			
			port: '8222', //代理端口,不固定8222，可以是其他的
			open: false, //项目启动时是否自动打开浏览器
			proxy: {
				'/api': {
					target: 'https://www.你的域名.com/api',	//接口地址
					// ws:true,			//允许ws跨域
					secure:false,		//类型:https=false  http=true
					changeOrigin: true, //是否跨域
					pathRewrite:{    // 重写路径
						'^/api':''
					}
				}
			},
			
			/////////本地调试时打开
		}
	},
	//productionSourceMap: false,
}

文件内容：