前後端分離，Node.js運作vue前端請求tomcat上Java後端資料的代理

代理

需求現在是前端vue運作在nodejs上，假設端口8080，java運作在tomcat上，假設端口80（可省略），現在需要前端請求後端資料，因為不在同一個伺服器上，端口不同，ajax不能直接通路。

解決方式：

例如現在要通路java的web/SelectUserById

vue+node.js目錄結構

建立代理檔案

命名為vue.config.js

内容如下：

module.exports={
		devServer:{
			proxy:{
				'/web':{
						target:'http://localhost/vueTomcat/web',
						changeOrigin:true,
						ws:false,
						pathRewrite:{
							'^/web':''
						}
				}
			}
		}
}
           

target:目标伺服器網址

changeOrigin:需要虛拟主機站點

ws:是否代理websocket

pathRewrite:{

'^/web':''

} 以/web開頭的替換為‘’空串。

ajax請求如下寫法：

axios.post("web/selectUserById", qs.stringify(this.user, {
  					headers: {
  						'content-type': 'application/x-www-form-urlencoded'
  					}
  				})).then(function(result) {
  					that.user = result.data;
  					console.log(result);
  				});
           

就是說，隻要以web開頭通路的就會被代理到目标位址http://localhost/vueTomcat/web。

如果通路的是web/selectUserById，就會被代理到http://localhost/vueTomcat/web/selectUserById。

謝謝！