# Nginx教程 - 10 前后端分离与跨域
# 10.1 概念解释
# 10.1.1 什么是前后端分离
前后端分离 是一种软件架构设计模式，它将传统的Web应用分为前端和后端。
前端（Frontend）：负责用户界面和用户交互部分，通常使用HTML、CSS和JavaScript开发。现代前端框架包括React、Angular和Vue.js等。
后端（Backend）：负责业务逻辑、数据处理和数据库交互，通常使用服务器端编程语言如Node.js、Python、Java、PHP等开发，并提供API（如RESTful或GraphQL）供前端调用。
前后端分离的好处：
提升开发效率：前后端分离允许前后端开发团队并行工作，互不影响。前端团队可以专注于页面的交互逻辑和用户体验，后端团队则专注于业务逻辑和数据处理。
降低维护成本：由于前后端代码是分离的，因此当其中一方需要修改时，不会影响到另一方。这大大降低了代码的耦合性，提高了系统的可维护性。
提高系统性能：前端通过异步方式与后端进行数据交互，可以实现页面的局部刷新，减少不必要的流量传输，提高系统的响应速度和用户体验。
支持跨平台：前后端分离使得前端可以独立于后端进行部署和测试，从而支持更多的平台和设备。
# 10.1.2 什么是跨域
跨域（Cross-Origin）是指浏览器的同源策略（Same-Origin Policy），同源策略是浏览器的一种安全策略，浏览器会限制了从一个域（域名、协议和端口相同）加载的文档或脚本去访问另一个不同域的资源。这种限制是为了防止一个网站恶意读取另一个网站的敏感信息。
以下 URL 都被认为是不同的源：
http://doubibiji.com与http://www.doubibiji.com（子域名不同）http://www.doubibiji.com:80与http://www.doubibiji.com:8080（端口不同）http://www.doubibiji.com与https://www.doubibiji.com（协议不同，http和https）
在前后端分离的项目中，前端和后台服务不是在同一个项目中，这会导致前后端的IP地址、端口或域名不一致，从而产生跨域问题。具体来说，当前端页面尝试通过Ajax等技术向后端接口请求数据时，如果前后端不满足同源策略的要求，浏览器就会阻止这次请求，从而引发跨域问题。
例如，当Spring Boot后端服务运行在一个端口上，而Vue前端服务运行在另一个端口上时，由于两者端口不同，因此不满足同源策略的要求。此时，当Vue前端尝试通过Ajax请求Spring Boot后端接口时，就会遇到跨域问题。
# 10.1.3 跨域问题的解决方法
# 1 JSONP
JSONP（JSON with Padding）是一种通过 <script> 标签加载 JSON 数据的方式，但它只支持 GET 请求。JavaScript跨域请求数据是不可以的，但是使用 <script> 标签跨域请求其他站点的JavaScript脚本是可以的。可以把数据封装到JavaScript脚本中，作为脚本中函数的参数，然后将脚本返回给客户端，客户端获取脚本后，立即执行脚本，就可以获取到函数的参数，也就是服务器传递的数据了，从而解决了跨域问题。
JSONP是一种比较老的方式，目前已经被 CORS 大部分取代。
# 2 CORS
这是一种在服务器端通过设置适当的 CORS 头来允许跨域请求。也就是服务器告诉浏览器，我允许被跨域来访问，不要拦截了。
例如可以通过在Spring Boot项目中添加CORS配置类来实现，允许前端页面的域名访问后端接口。
# 3 使用反向代理
通过配置反向代理，前端所有的请求都会发送到同一个域名，也就是 Nginx 接收所有的请求，包括前端静态页面和后端动态数据接口的请求，然后 Nginx 反向代理服务器再根据请求路径将后端请求转发到对应的后端服务器，这就避免了浏览器的跨域限制。
# 10.2 反向代理配置
使用 Nginx 进行前后端分离的配置，使用的是反向代理配置来实现的，所以先介绍一下 Nginx 中的反向代理配置。