我是Next.js的新手,我想知道export default function handler
有什么用,因为我们可以直接用fetch
调用API。
在我的HTML代码中,我把下面的代码。当我点击submit
按钮时,sendformData()
函数将被调用。
第一个
当调用sendformData
函数时,它调用/api/comments/
文件并调用函数。
下面是/api/comments/[id].js
文件的代码。
export default async function handler(req, res) {
if (req.query.id == 'getTwitFrmUrl') {
const resData = await fetch(
"https://dev.. .com/api/getTwitFrmUrl?twitId=" + req.query.twitUrl
).then((response) => response.text()).then(result => JSON.parse(result).data);
res.status(200).json({ data: resData });
}
else if (req.query.id == 'getformdata') {
console.log('getformdata api');
res.status(200).json({ user: 'getuserData' });
}
}
当我把下面的代码放在sendformData
中时,同样的响应也会被检索到。那么为什么我们需要调用export default function handler
函数呢?
sendformData = async () => {
const res = await fetch(
"https://dev.. .com/api/getTwitFrmUrl?twitId=" + req.query.twitUrl
).then((response) => response.text()).then(result => JSON.parse(result).data);
const result = await res.json();
this.setState({ data: result.data });
};
1条答案
按热度按时间o8x7eapl1#
如果你已经有了一个API,那么就没有必要通过API路由来代理对该API的请求,直接调用它是完全可以的。
但是,也有一些使用案例需要这样做。
安全问题
出于安全原因,您可能希望使用API路由来隐藏外部API URL,或避免公开来自浏览器的请求所需的环境变量。
/api/secret
代替https://company.com/secret-url
)避免CORS限制
您可能还希望通过API路由代理请求以避开CORS。通过从服务器向外部API发出请求,将不会应用CORS限制。