前后端分离

WyuanY.

于 2024-01-16 08:01:36 发布

阅读量446

点赞数 8

文章标签： java

本文链接：https://blog.youkuaiyun.com/m0_64171591/article/details/135609913

版权

本文介绍了前后端分离的架构模式及其优势，详细解释了跨域的概念、同源策略，以及CORS技术标准，包括Access-Control-Allow-Origin等关键头信息的设置。还提供了一个JavaWebFilter示例实现跨域访问控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前后端分离

前后端分离是Web应用的一种前后端解耦的架构模式，其优点有：

分工更加明确，使开发者更专业
减轻服务器端压力，提高性能
提升开发率
增强代码可维护性
增强了系统灵活性

二、跨域

1、概念

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机或域名（host）和端口号（port）。

同源的三要素：协议、主机或域名、端口号

反之，当一个请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同即为跨域。

2、解决跨域

JSONP、CORS、postMessage、WebSocket、Node中间件代理（两次跨域）、Nginx反向代理、window.name + iframe、location.hash + iframe、document.domain + iframe。

三、CORS

Cross Origin Resource Sharing（跨域源资源共享）是W3C提出的一种技术标准，允许访问来自不同服务器上的指定资源。分为：简单请求和复杂请求。

Access-Control-Allow-Origin：必选，允许跨域请求资源
Access-Control-Allow-Methods：可选，允许跨域请求的方法
- get：查询
- post：添加
- put：修改
- delete：删除
Access-Control-Allow-Credentials：可选，允许浏览器发送Cookie
Access-Control-Max-Age：可选，用于指定本次预检请求的有效期，单位为秒
Access-Control-Allow-Headers：定义可以返回所有支持的头部信息，如：
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：
  - application/x-www-form-urlencoded
  - multipart/form-data
  - text/plain

定义过滤器，允许跨域访问/api/*

/**
 * 跨域访问
 *
 * @author zqx
 * @date 2023-04-30
 */
@WebFilter(urlPatterns = "/api/*")
public class CorsFilter implements Filter {
  @Override
  public void init(FilterConfig filterConfig) 
    throws ServletException {
    System.out.println("CoresFilter.....");
  }

  @Override
  public void doFilter(ServletRequest servletRequest, 
                       ServletResponse servletResponse, 
                       FilterChain filterChain) 
    throws IOException, ServletException {
    // 1.向下转型
    HttpServletRequest request = (HttpServletRequest) servletRequest;
    HttpServletResponse response = (HttpServletResponse) servletResponse;

    // 2.跨域处理
    // 允许所有的域名
    response.setHeader("Access-Control-Allow-Origin", "*");

    // 允许请求所有的方法
    response.setHeader("Access-Control-Allow-Methods", "*");

    // 允许请求头信息字段（Authorization）
    response.setHeader("Access-Control-Allow-Headers", 
                       "Authorization,Origin,X-Requested-With,Content-Type,Accept," +
                       "content-Type,origin,x-requested-with,content-type,accept," +
                       "authorization,token,id,X-Custom-Header,X-Cookie," +
                       "Connection,User-Agent,Cookie,*");

    // 3.放行
    filterChain.doFilter(request, response);
  }

  @Override
  public void destroy() {

  }
}