沃梦达 / IT编程 / 前端开发 / 正文

VUE跨域代理配置

VUE跨域代理配置为什么会出现跨域VUE设置跨域(其他的情况未写)为什么会出现跨域浏览器访问非同源的网址时,会被限制访问,出现跨域。不同源:协议,域名,端口号三者之一不同。VUE设置跨域(其他的情况未写)...

VUE跨域代理配置

  • 为什么会出现跨域
  • VUE设置跨域(其他的情况未写)

为什么会出现跨域

浏览器访问非同源的网址时,会被限制访问,出现跨域。

不同源:协议,域名,端口号三者之一不同。

VUE设置跨域(其他的情况未写)

在vue.config.js文件中配置:

devServer: {
	host: 'localhost',
	port:8080,//端口号
	proxy: {
		'/api': {  //拦截包含 /api 的接口
			target: 'http://xxxxx:9093', //设置调用的域名和端口号
			changeOrigin: true, //true 实现跨域
			secure: false //协议为https时,需要配置此参数
		},
		‘/fuer': {  //拦截包含 /fuer,但是不包含 /api 的接口,
			target: 'http://xxxxx:9093'
		}
	}
	
}

本地调接口没问题了,上生产后,没有proxy,接口路径会多一个/api:(http://10.134.57.218:8080/api/api/fconfigci/plugin/queryMarkDown’)
此时需要配置

pathRewrite: {
	'^/api': '' 删除生产环境上接口多了个/api的情况
}

正常显示为:http://10.134.57.218:8080/api/fconfigci/plugin/queryMarkDown

如不正确,请指正,谢谢~

本文标题为:VUE跨域代理配置