在Nginx中设置反向代理，实现Vue访问同一IP地址内的后端接口

最近在接触前后端分离的Springboot+vue框架。相较于之前用的ASP .NET MVC框架，Springboot+vue将前后端分离得更加彻底，并且将前后端分别置于不同的服务器：Nginx和Tomcat中。

因此，用ASP .NET MVC的思想让前端访问后端接口时就会出现一些小问题。本文记录如何设置反向代理，让vue访问同一IP地址内的后端接口。

　　-- By Brisk

不同于ASP .NET MVC直接localhost一撸到底，如果在vue中的axios中设置请求接口为localhost，如下：

axios.defaults.baseURL = 'http://localhost:8081'

则在本地开发时是没有问题的，但是在发布到云端后会报错，如下所示：

 

 

这是因为此时这个POST请求是由浏览器直接向localhost这个地址，通俗讲就是浏览这个页面的电脑发出的，在这里自然是找不到8081上的接口，因为接口发布在云端嘛。

解决办法有3种，最后一种是目前采用的解决办法。

1）直接在axios中写后端接口的具体地址

如下：

axios.defaults.baseURL = '接口具体IP地址+端口'
如
axios.defaults.baseURL = 'http://1.2.3.4:8081'

这样便可以访问后端的接口地址。但是这样会将后端的接口地址直接暴露在浏览器中，且云服务器需要开放8081，虽然可以解决问题，但是不是很优美。

 

2）在vue程序中设置反向代理。

在vue工程的index.js中找到ProxyTable，设置反向代理的相关内容。可参考网上资料。这时axios的默认baseURL就可以写成：

axios.defaults.baseURL = '/api'

在浏览器中调用POST接口访问后端接口时，接口地址就变成：“vue前端服务器地址/api/”，这样后端接口的地址就不会暴露在浏览器中了。如下图，其中XX.XX.XX.XX:8088/api/就是反向代理后的后端接口，真实接口地址并没有暴露。

但是这样依然有缺点：a）仍需要在vue工程中显示地给出后端接口的地址；b）项目打包后，在Nginx中该方法会失效，具体原因不明。

 

3）在Nginx中设置反向代理

最后采用的解决办法是在Nginx中使用反向代理。以下理解可能有误：当在Nginx中设置反向代理后，浏览器发出的请求会传送给Nginx，由Nginx决定请求发送至哪里。这样就会有一个好处，因为Nginx和Tomcat在同一个IP地址内，因此Nginx可以直接通过127.0.0.1加端口号来访问后端接口。这样既无需显示地给出后端接口地址（只要给个端口号），也可以在生产环境中使用反向代理，云端同样无需开放8081端口。

在Nginx中设置反向代理的方法如下，在nginx.conf中输入（注意api后面有个/）：

location /api/ {
            proxy_pass   http://127.0.0.1:8081/;
}

就可以用 “vue前端地址/api/”来访问位于8081端口的后端接口啦。vue中axios的设置与2）一致：

axios.defaults.baseURL = '/api'

 

补充：

经过上述方法，可以在post请求中访问到后端的接口了。但是此时若在本地开发，需要修改axios的baseURL，不是很方便。因此，可以在main.js中使用以下代码，判断向前端服务器发出请求的是否为localhost，然后改变axios的baseURL：

let host = window.location.host // 主机
let reg = /^localhost+/
if (reg.test(host)) {
  // 若本地项目调试使用
  axios.defaults.baseURL = 'http://localhost:8081'
} else {
  // 远程访问 使用代理
  axios.defaults.baseURL = '/api'
}

经过上述方法，就解决了生产环境下，实现vue通过post访问同一IP地址下的后端接口。