前后端分离项目部署后,前、后端项目使用ajax交互的问题
发布于 6 年前 作者 fvxiaoyi 5478 次浏览 来自 问答

现有前后端两个项目部署在同一台机器上,前端项目用nginx 映射到80端口,后端接口项目部署在8080端口,前端项目里通过ajax 访问后端接口渲染界面,ajax请求接口的地址如果是用 127.0.0.1:8080,通过其他机器去访问这个前端项目的时候,会发现这个127.0.0.1:8080 是去当前访问机器的8080端口,不是服务器里后端接口项目的端口,这是什么问题?同个服务器里面的前端项目要访问后端接口项目只能通过服务器的ip+后端端口这样去访问吗?

8 回复

如果前后端单独部署就不存在这个问题,针对上面的这个问题,最好还是采用本地代理的方式访问,或者临时采用服务器IP+端口直接访问!

什么问题?

127.0.0.1当然是本地的 IP 了, 8080端口肯定是你自己的端口啊。

这不是代理不代理的问题, 而是没搞清楚 127.0.0.1 就是本地 IP

所以,访问前端项目,调用 API,就需要指定 IP 或域名。例如请求 APIhttp://example.com/api/user

如果你不想指定 IP/域名,可以请求相对路径 /api/user, 然后通过反向代理到 http://localhost/api/user (因为前后端在同一服务器,所以是 localhost)

@axetroy 例如我前端项目的地址是 http://example.com/ ,调用 API时候用相对路径 /api/user,那就是ajax请求的地址就是 http://example.com/api/user, 而API的接口实际是 http://example.com:8080/user, 这个时候是对 http://example.com/api 这个地址去反向代理到 http://localhost:8080 这样吗?

@axetroy 上面的这个做法是否可以理解成,例如用户查看列表界面,其实是用户访问了2次你的服务器,一次是请求界面 http://example.com/user,一次是请求接口 http://example.com/api/user ? 还是说,用户只请求一次界面, API请求是由前段项目发起的? 如果是由前端项目发起的,前端项目对后端API的请求(http://example.com/api/user)是算服务器两个项目间的本地的请求 还是 前端项目通过外网的各种解析最后访问到服务器里的后端项目?

@fvxiaoyi

看图吧,我也不知道怎么说了

1.png

@axetroy 谢谢,我大概知道了,ajax 是在客户端运行的,然后用户请求前端界面,渲染发起的ajax请求,例如 127.0.0.1:8080/api/user , 这时候找到的是当前用户机子的端口,所以必须指定 IP 或域名,。 最终就是用户对你的服务器发起了2次请求,一次是加载界面,一次是请求数据

不一定动不动就上nginx 吧。 http-server (nodejs ) 模块, webpack 都可以设置代理的。

回到顶部