localhost:300/api无法访问，Next.js API接口报错求助

• 报错原因：浏览器直接访问localhost:300/api发起的是GET请求，但你的route.js仅实现了POST方法的处理逻辑，Next.js会对不支持的请求方法返回405错误，导致页面显示“This page isn’t working”。
• 解决办法1：添加GET请求处理
  修改app/api/route.js，新增GET方法的导出，这样直接访问就能返回预期的JSON响应：

  import { OpenAIClient, AzureKeyCredential } from '@azure/openai';
  import { NextResponse } from 'next/server';
  
  const endpoint = process.env.AZURE_OPENAI_ENDPOINT;
  const apiKey = process.env.AZURE_OPENAI_API_KEY;
  const model = process.env.AZURE_OPENAI_MODEL;
  
  export async function POST(req){
      return NextResponse.json({ 
          message: 'Hello world'
       })
  }
  
  // 新增GET请求处理
  export async function GET(){
      return NextResponse.json({ 
          message: 'Hello world'
       })
  }
  

• 解决办法2：用POST方式调用API
  如果你的API仅需处理POST请求，不要用浏览器直接访问，改用POST请求方式调用：
  • 使用curl命令：

    curl -X POST http://localhost:300/api
    

  • 用Postman、Insomnia等API调试工具发送POST请求到该地址，就能获取到{"message": "Hello world"}响应。

注：当前代码里的Azure OpenAI相关变量并未在POST方法中使用，后续如果要调用OpenAI接口，确保.env文件中的变量值正确即可，服务器端环境变量无需添加NEXT_PUBLIC_前缀。

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