React移动端同局域网无法访问数据库问题求助

你的问题核心是跨域限制或API请求地址配置错误：

• PC端通过npm start运行时，React开发服务器的代理（若已配置）会转发前端API请求到后端，规避跨域问题；同时若API地址写死localhost:8080，PC端可正常访问自身后端。
• 手机访问时，要么API请求的localhost指向手机自身导致无法连接后端，要么前端从PC_IP:3000请求PC_IP:8080触发浏览器跨域拦截。

方案1：修正API请求地址为局域网IP #

如果前端代码直接写死了http://localhost:8080/api这类地址，将localhost替换为你的PC局域网IP（比如192.168.1.100）：

• 示例修改：把fetch('http://localhost:8080/api/data')改为fetch('http://192.168.1.100:8080/api/data')
• 前提：后端需允许跨域请求，或已通过其他方式规避跨域。

方案2：配置React开发服务器代理（推荐） #

若前端使用相对路径（比如fetch('/api/data')），确保React开发服务器代理配置正确，让手机访问时也能正常转发请求：

1. 在React项目的package.json中添加代理配置：

"proxy": "http://localhost:8080"

2. 重启npm start，让开发服务器加载新的代理配置。
3. 手机访问PC_IP:3000时，前端的/api请求会被自动转发到PC的后端服务，且因请求同域名（PC_IP:3000）不会触发跨域拦截。

方案3：后端配置跨域允许 #

若不想依赖React代理，直接在SpringBoot后端添加跨域配置：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("*") // 生产环境建议指定具体域名，如http://192.168.1.100:3000
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

配置后，前端直接请求PC_IP:8080/api时，浏览器不会拦截跨域请求。

1. 任选一种方案修改后，重启前端和后端服务。
2. 手机访问PC_IP:3000，测试数据库相关功能。
3. 若仍报错，打开手机浏览器开发者工具（Chrome可通过远程调试查看），查看具体网络错误信息（如404或CORS错误），进一步排查。

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