在生产环境中axios向后端发送请求为什么不用localhost呢?

Question

老哥们，问个问题。为啥在线上的服务器中，前端axios连接后端api要用公网IP或者域名呢，前后端都是在同一个服务器上运行的，为啥不是localhost呢。
或许，是前端的代码是被服务器下载到浏览器上，在浏览器中运行。然后再通过浏览器向后端api发送请求，这样localhost是使用浏览器浏览页面的这台电脑的localhost，而不是服务器的localhost?

Answer 1

前后端在同一个服务器上运行的

首先要明确，前、后端在服务器上的“运行”方式是不一样的：

前端一般是由静态资源服务器程序（例如 NGINX）来托管，在这个服务器程序收到请求之后，会把相应的文件（html/js/css/图片等等）直接原样返回给浏览器，最终是在浏览器去执行你的 JS 逻辑。也就是说，前端在服务器上仅仅是一个文件托管，没有逻辑处理（这里不考虑服务端渲染，有兴趣可以自行查找资料）。

后端则是收到 HTTP 请求之后，在服务器上进行一系列的逻辑运算，然后再把结果返回。

也就是说，前后端的代码逻辑实际上并不是同一个服务器上运行的

localhost

关于 localhost，其实它是一个域名，约定它指向本机，也就是 127.0.0.1，这个你可以在 /etc/hosts 或者是 C:\Windows\System32\drivers\etc\hosts 里找到对应的绑定设置。

你在本地开发调试的时候，因为你的浏览器（前端代码执行环境）和后端代码都在本地这台机器上，也就可以用 localhost 来请求接口了。

而你的代码，最终是给用户用的，他们的 localhost 指向的是他们自己的设备，那里可没有你的后端代码和数据库等东西，所以你的代码如果在他们的浏览器上也是请求 localhost 的话当然是不行的啦

Answer 2

localhost 你也可以理解为是一个域名。localhost 是指 127.0.0.1。

如果你是想单纯的访问服务器的根路径，那么你可以使用绝对路径 <img src="/"> 这样，浏览器会自动访问服务器的根路径

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 3

前端项目是运行在客户浏览器环境下的，使用的网络是客户自己电脑的网络，那么请求localhost就相当于请求客户自己电脑，很显然，客户自己的电脑上并没有后端代码，后端代码在你们公司自己的服务器上，那么axios在请求的时候，就必须请求指定的域名或者ip，否则无法请求到后端的接口