最近在做八字合婚类小程序时，前端使用 UniApp，后端采用 Java 接口，整体走前后端分离架构。开发过程中，跨域、端口、接口路径、服务器防火墙和小程序域名配置都踩了不少坑。这里整理一份偏工程实现的记录，方便后续二开和部署时排查问题。

项目需要实现用户输入双方出生时间后，前端将参数提交到后端，后端完成排盘、合婚规则计算，再返回结构化结果。前端只负责表单校验、接口调用和结果展示，不直接参与命理规则实现。

这类业务接口本身并不复杂，真正容易出问题的是 UniApp 多端编译后，H5、小程序和 App 的请求环境不一致。

前端采用 UniApp，后端使用 Java + Spring Boot，数据库使用 MySQL，缓存层可选 Redis。部署时，前端 H5 放在 Nginx 下，后端 Java 服务单独运行，小程序则通过 HTTPS 域名访问后端接口。

请求链路大致如下：UniApp 前端 → Nginx / 小程序网络层 → Java 后端 API → MySQL / Redis

开发阶段，H5 通常运行在本地端口上，比如 

。端口不同、域名不同，就会触发浏览器跨域限制。

最容易遇到的问题是跨域。H5 环境下，前端和后端只要协议、域名或端口任意一个不同，就会被浏览器判定为跨域。本地开发时，可以通过 UniApp 的 devServer 代理解决；生产环境则建议通过 Nginx 反向代理，把前端和接口放在同一域名下。

另一个常见问题是接口路径写死。前端如果直接写 

http://localhost:8081/api/hehun/calculate

，本地调试可能正常，但打包成小程序后就会失败。小程序要求接口域名必须配置合法域名，且必须使用 HTTPS，不能使用 IP 地址。

服务器端口也需要注意。Java 后端默认使用 8080 或 8081 端口，如果服务器开启了防火墙，必须手动放行对应端口。H5 部署时，前端页面端口和接口端口不需要同时暴露给公网，更安全的方式是让 Nginx 统一代理。

下面是 UniApp 前端请求示例。开发环境下使用 /api 前缀，由代理转发到后端；小程序和 App 环境则使用正式域名。const getBaseUrl = () => {
  // #ifdef H5
  return '/api';

  // #endif


  // #ifdef MP-WEIXIN || APP-PLUS
  return 'https://api.example.com';
  // #endif
};


export function calculateHehun(data) {
  return uni.request({
    url: getBaseUrl() + '/hehun/calculate',

    method: 'POST',
    header: {
      'Content-Type': 'application/json'
    },
    data
  });
}

UniApp H5 开发环境可以在 manifest.json 中配置代理，避免本地跨域："h5": {
  "devServer": {
    "port": 8080,
    "disableHostCheck": true,
    "proxy": {
      "/api": {
        "target": "http://localhost:8081",
        "changeOrigin": true,
        "secure": false,

        "pathRewrite": {
          "^/api": ""
        }
      }
    }
  }
}

后端如果使用 Spring Boot，可以添加全局跨域配置。需要注意的是，生产环境更推荐通过 Nginx 同域代理解决跨域，而不是长期依赖 

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

H5 部署时，建议把 UniApp 编译后的静态资源放到 Nginx 目录，并通过 

 支持前端路由。接口请求可以通过 Nginx 代理到 Java 后端，这样浏览器就不会再报跨域。

location / {
    root /www/wwwroot/hehun-h5;
    index index.html;
    try_files $uri $uri/ /index.html;
}

location /api/ {
    proxy_pass http://127.0.0.1:8081/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

小程序部署时，后端域名必须完成 ICP 备案，并配置 HTTPS 证书。微信小程序的服务器域名需要在微信公众平台后台配置，且不能使用 IP 和端口拼接的方式。如果后端接口返回非 UTF-8 编码，也可能导致小程序解析异常，建议统一使用 UTF-8。

服务器层面，需要确认 Java 后端端口、Nginx 端口、HTTPS 443 端口是否已放行。如果使用了宝塔、云防火墙或安全组，要同时检查入方向规则。接口上线前，最好先用 

 或 Postman 验证后端返回是否正常，再排查前端跨域和域名配置问题。

整体看下来，UniApp 对接 Java 后端并不复杂，关键是开发环境用代理解决跨域，生产环境用 Nginx 统一域名，小程序端严格配置 HTTPS 和合法域名。把这些环节理顺后，后续做二开、多端部署和源码维护都会轻松很多。

Uniapp开发八字合婚小程序，对接后端API踩坑总结

前端

后端

运维

UniApp跨端开发Java后端接口避坑指南，涵盖H5、小程序、App三端请求差异，详解跨域代理、Nginx同域配置、HTTPS域名部署、端口防火墙及SpringBoot跨域设置，附完整代码与上线排查方案。

云防火墙

防火墙

数据库

服务器

路由

MySQL

Redis

Nginx

JSON

Java

热销域名限时优惠，新客首年免费！


domain

腾讯云双十一大促

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

Uniapp开发八字合婚小程序，对接后端API踩坑总结

Uniapp开发八字合婚小程序，对接后端API踩坑总结

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐