前后端分离，Node.js运行vue前端请求tomcat上Java后端数据的代理

迈不过友情╰ 2021-11-22 03:58 274阅读 0赞

**代理**

需求现在是前端vue运行在nodejs上，假设端口8080，java运行在tomcat上，假设端口80（可省略），现在需要前端请求后端数据，因为不在同一个服务器上，端口不同，ajax不能直接访问。

解决方式：  
例如现在要访问java的web/SelectUserById

vue+node.js目录结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70]  
**新建代理文件**  
命名为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。

--------------------

谢谢！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzcxMDA0_size_16_color_FFFFFF_t_70]: /images/20211122/fb32ca9058f34a4699cff898c0874d87.png