跨Mac设备：VSCode前端Fetch连接Spring后端遇IP/服务器错误求助

• 后端Spring服务绑定地址配置
  默认Spring Boot服务仅绑定localhost（127.0.0.1），只能本机访问。要允许跨设备连接，需修改服务绑定地址：

  • 在application.properties中添加：server.address=0.0.0.0
  • 或在application.yml中配置：

    server:
      address: 0.0.0.0
    

  配置后服务会绑定到所有可用网卡，支持局域网内其他设备访问。

• 确认后端服务的可访问地址

  • 前端Fetch请求必须使用后端Mac的局域网IP（而非localhost或127.0.0.1），搭配服务端口和接口路径，示例：fetch('http://192.168.1.105:8080/api/test')
  • 查看后端Mac的局域网IP：打开终端执行ifconfig，找到en0或en1网卡下的inet字段值（如192.168.x.x）
  • 确保后端服务端口（默认8080）未被占用，启动后检查IntelliJ控制台输出的地址包含0.0.0.0:端口号

• Spring后端CORS跨域配置
  浏览器会拦截跨域请求，即使前端设置了请求头，后端也需允许对应来源访问：

  • 快速测试：在接口控制器类上添加@CrossOrigin(origins = "*")（仅开发环境使用）
  • 全局配置示例：

    @Configuration
    public class CorsConfig implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE")
                    .allowedHeaders("*");
        }
    }
    

• 验证两台设备的网络连通性

  • 确保两台Mac连接同一Wi-Fi或有线网络，不同局域网需额外配置端口映射（开发阶段优先用同一局域网）
  • 前端Mac终端执行ping 后端Mac的局域网IP，能通则网络连通，不通则检查路由器权限或设备网络设置

• 前端Fetch请求的细节检查

  • 确认请求协议与后端一致（开发阶段优先用HTTP，HTTPS需处理证书问题）
  • 示例Fetch代码：

    fetch('http://192.168.1.105:8080/api/hello', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error('请求错误:', err));
    

  • 打开浏览器控制台（F12）查看具体错误类型（如ERR_CONNECTION_REFUSED或CORS错误），针对性排查

内容的提问来源于stack exchange，提问作者begginerCodeing