调用外部API时为何需要使用Next.js的API路由handler函数？

你写的替换后的sendformData代码本身就无法正常运行：前端代码运行在用户浏览器中，不存在req这个服务端才有的请求对象，你不可能在前端直接获取req.query参数，这是最直观的问题。

哪怕你调整参数后理论上能直接在前端调用第三方接口，Next.js的export default function handler（也就是API路由）也有不可替代的价值，核心作用如下：

• 解决浏览器跨域限制：浏览器同源策略会禁止前端页面直接请求非同域名下的接口，除非第三方服务专门配置了CORS放行你的站点域名。而API路由运行在Next.js服务端，服务端发起请求不受跨域规则限制，天然就能解决跨域问题。
• 保护敏感信息：如果第三方接口需要鉴权密钥、内部参数等敏感信息，直接写在前端代码里会被所有用户通过抓包、查看源码拿到，极易被滥用。把请求逻辑放在API路由中，敏感信息只会保存在服务端，不会暴露给前端。
• 统一封装请求逻辑：如果你的项目多个页面都需要调用这个第三方接口，后续如果要改请求参数、更换接口地址、加错误重试逻辑，只需要修改一次API路由的代码即可，不需要逐个修改前端页面的请求逻辑。同时你也可以在这一层统一加日志打印、请求限流、权限校验等逻辑，避免前端重复开发。
• 优化前端请求体验：第三方接口可能返回大量冗余字段，你可以在API路由层提前裁剪掉不需要的内容，只返回前端需要的字段，减少网络传输体积。也可以直接在服务端把接口返回的格式处理成前端需要的结构，减少前端的计算压力。
• 避免暴露内部服务地址：你直接在前端请求内部dev域名的接口，相当于把你的后端服务地址直接暴露给所有用户，容易被恶意扫描攻击。用API路由做中转，用户只能看到你站点的/api/xxx地址，不会知道背后的第三方服务地址。

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