前后端跨域联调

很多伙伴在学习前端或后端到一定时段时，就会思考前端后端两个东西之间的请求和数据到底是怎么联系起来的！

今天就来了解一下这个东西吧！

1.前端发送的请求，如何请求到后端服务的？

对于前端发出来的请求，跟后端的接口地址没有匹配到。

前端发出来的请求，并不是直接请求到后端服务器的，而是由nginx（反向代理）做了一个转发，把请求发送到后端服务器。

---

Nginx 反向代理 是一种常见的应用场景，它作为代理服务器，接收客户端请求，并将这些请求转发给后端服务器（如应用服务器）。反向代理与正向代理的区别在于，正向代理是客户端的代理，而反向代理是服务端的代理。 

---

工作原理：

1. 客户端请求：用户通过浏览器等客户端向服务器发送请求（如访问一个网站）。
2. Nginx 接受请求：Nginx 作为反向代理服务器，接收这些请求。Nginx 会处理请求并将其转发到后端应用服务器（例如，一个 Web 应用或者 API 服务）。
3. 后端服务器处理请求：后端服务器处理请求后，将结果返回给 Nginx。
4. Nginx 返回响应：Nginx 将后端服务器的响应返回给客户端。

前端请求为什么不直接请求到后端服务器？

• 负载均衡：Nginx 可以将客户端请求分发到多台后端服务器，实现负载均衡，避免某一台服务器压力过大。
• 安全性：反向代理可以隐藏后端服务器的具体信息，增强系统的安全性。
• 缓存：Nginx 可以缓存静态文件（如图片、CSS、JS）和动态内容的响应，减少后端服务器的负载，提高访问速度。
• SSL/TLS 终止：可以让 Nginx 处理 SSL 加密与解密（SSL 终止），减少后端服务器的压力。

下面来举个例子:

server{
        listen 80;
        server_name localhost;
        
        localhost/api/{
                proxy_pass    http://localhost:8080/admin/; #反向代理
        }
}

前端：http://localhost/api/employee/login

后端：http://localhost:8080/admin/employee/login

我们可以看到前端请求的地址中：/api/ 恰好与上面代码中的/api/匹配，这时就会将前端发送过来的请求转发到后端（通过proxy_pass指令，将前端发送的请求，转发到后端的接口地址）。

简单的讲，拿上面的例子，就是将/api/替换为proxy_pass后的地址（红色部分），而/api/后面的动态地址，则直接拼接到替换后的地址后面即可，这样就得到了新的请求地址，也就成功将请求的地址转发到后端服务器。