前后端联调时出现的一些问题记录

发布于:2025-09-10 ⋅ 阅读:(13) ⋅ 点赞:(0)

  1. 服务器的ip没有设置成所有ip都能访问的,或防火墙没开
  2. 跨域问题(刚开始异源,有这个问题,主要是前端做一下配置代理,后端也可以配置跨域资源共享(CORS))
    @Configuration
    public class CorsConfig implements WebMvcConfigurer {
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*") // 允许所有来源
                    .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许所有请求方法
                    .allowedHeaders("*"); // 允许所有请求头
        }
    }
  3. 前端配置时的请求参数名和后端设置的不一致
  4. 前后端的数据格式不匹配,要统一为JSON字段类型(后端做个JsonUtils来序列化/反)
  5. 对于时间这个字段,后端要配置一下返回的格式,定义为LocalDateTime类型,并加上注解
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
  6. 后端的某个字段的varchar设置的长度不够
  7. 返回的code的统一,请求成功是1,有问题一律是0
  8. token的配置,过期时间和生效问题,以及要加上Bearer来标记,告知服务器请求中包含的是一个token(这个token是一种表示权限或身份验证信息的凭证)
  9. 拦截器的问题,可能/index和/index/* 的细微差异就完全不一样(/index:表示精确匹配路径为 /index 的请求,只能是这一个路径才能被拦截,/index/*:是一种通配符形式的路径匹配,代表拦截以 /index/ 开头的所有请求)
  10. 获取列表类似的接口,给前端返回数据的时候,返回成数组的形式,前端更好渲染(相比于返回对象)(若数据是「多个同类事物」(列表、集合)→ 用 数组;若数据是「一个事物的多属性」或「多维度结果」(详情、统计、接口响应体)→ 用 对象
  11. 图片有时候把网上的图片链接存到数据库中,前端那里展示的时候展示不出来,后续可以改进:通过 Nginx 将图片目录映射为 URL 路径(如http://服务器地址/images/xxx.jpg),前端直接通过该 URL 访问图片
  12. nginx配置找不到资源的问题(配置了server里面的server_name和location路径,用于主页面index.html和静态资源的单独访问)【要是反向代理:要启动两台机器,假设是本机localhost和服务器ip,那就是访问本机然后代理到服务器;显然这种方案的局限性很明显,所以可以申请一个域名,然后通过访问域名代理到服务器,具体配置:proxy_pass 路径
    # 定义一个服务器块,监听 80 端口(HTTP 默认端口)
    server {
        listen 80;
        # 服务器的公网 IP 或已解析的域名(如 your-domain.com)
        server_name 1.2.3.4 your-domain.com; 
    
        # 核心:所有请求(/ 开头)转发到后端服务
        location / {
            # 转发目标:服务器本机的后端服务(IP:端口)
            proxy_pass http://127.0.0.1:3000; 
    
            # 关键:向后端传递原始请求信息(否则后端获取不到真实客户端 IP、域名等)
            proxy_set_header Host $host;                  # 传递外部访问的域名/IP
            proxy_set_header X-Real-IP $remote_addr;      # 传递客户端真实 IP
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 传递代理链 IP
            proxy_set_header X-Forwarded-Proto $scheme;   # 传递协议(http/https)
    
            # 可选:配置超时时间(避免请求长时间阻塞)
            proxy_connect_timeout 60s;  # 连接后端超时
            proxy_read_timeout 60s;     # 读取后端响应超时
        }
    }

网站公告

今日签到

点亮在社区的每一天
去签到