Spring与Next.js 13数据传输问题排查与解决请求

核心问题分析 #

你的代码存在三个关键问题：

• Next.js API Route 的 GET 函数直接返回普通JSON，不符合API Route要求的Response格式
• Page组件中未正确解析fetch返回的Response对象，直接序列化Response会得到空结构
• Spring的CORS配置允许的Origin与Next.js运行地址不匹配，可能导致跨域请求失败

修复步骤 #

1. 修正Next.js API Route（route.ts） #

API Route必须返回NextResponse对象，不能直接返回axios获取的数据。修改代码如下：

// route.ts
import axios from "axios"
import { NextResponse } from 'next/server' // 引入NextResponse

export async function GET(request: Request) {
  const data = await callAxios()
  return NextResponse.json(data) // 用NextResponse包装JSON数据返回
}

async function callAxios(){
  const result = await axios.get('http://localhost:8080/firstCall', {
    // 若Spring接口不需要title参数，可删除params配置
    params: { 
      title: 'NEXT JS'
    },
    headers: {
      'X-Api-Key': 'my-api-key'
    }
  })
  return result.data
}

2. 修正Page组件（page.tsx） #

fetch返回的是Response对象，必须调用.json()方法解析其中的JSON数据：

// page.tsx
import styles from './page.module.css' // 确保引入样式文件，若不需要可删除

export default async function Home() {
  const res = await fetch(`http://localhost:3000/api/hello`)
  const jsonData = await res.json() // 解析Response为JSON

  console.log('jsonData', jsonData) // 现在会输出{ age:24, name:"mangdo" }

  return (
    <main className={styles.main}>
      <p>姓名：{jsonData.name}</p>
      <p>年龄：{jsonData.age}</p>
    </main>
  )
}

3. 调整Spring的CORS配置 #

你的Next.js运行在http://localhost:3000，但Spring配置的允许Origin是http://192.168.0.8:3000，需要统一地址：

@Configuration
public class WebMvcConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                // 开发环境可添加多个允许的Origin，生产环境建议指定具体地址
                registry.addMapping("/**")
                        .allowedMethods("GET", "PUT", "POST", "DELETE")
                        .allowedOrigins("http://localhost:3000", "http://192.168.0.8:3000");
            }
        };
    }
}

验证流程 #

1. 启动Spring Boot服务（端口8080）
2. 启动Next.js服务（端口3000）
3. 访问http://localhost:3000，查看控制台输出和页面渲染内容，应该能正确显示Spring返回的name和age数据

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