NextJS - fetch()只在getServerSideProps()中工作

Question

我的fetch()方法只在getServerSideProps()方法中工作。

例如，我有api调用获取客户推车(它是在getServerSideProps):

const res = await fetch(apiUrl, {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + jwtToken
}
});

它工作得很好，我从客户购物车的api得到响应。但当我尝试对button click进行api调用时，当我移动button click handle方法时，我会得到first:

访问在'…'从原点'http://localhost:3000'被CORS策略阻止:对预飞行请求的响应不通过访问控制检查:请求的资源上不存在' access - control - allow - origin '标头。如果一个不透明的响应满足你的需要，设置请求的模式为'no-cors'来获取CORS禁用的资源。

之后，当我设置模式为'no-cors'，然后我得到这个:

得到……net::ERR_ABORTED 400(错误请求)

所以它是如何可能的，当内部getServerSideProps，没有任何CORS问题，一切都很好，但当工作在一个按钮点击然后我得到CORS问题，之后有其他的"坏请求"问题。

Answer 1

因为根据设计，当API响应没有Access-Control-Allow-Headers时，浏览器会阻止API请求。但是当你在getServerSideProps中获取API时，API请求是由Node.js服务器发出的，它不检查Access-Control-Allow-Headers。

如果你想让这个API请求在浏览器中，你可以修复它:

// If you can change the API code, here's an example to add the CORS headers in a netlify serverless function, this is the API response that I return from a serverless function 
return {
statusCode: 200,
headers: {
/* Required for CORS support to work */
'Access-Control-Allow-Origin': '*', // you can add the domain names here or '*' will allow all domains
/* Required for cookies, authorization headers with HTTPS */
'Access-Control-Allow-Credentials': true
},
body: JSON.stringify({
message: 'Hello from netlify'
})
}

如果你的API后端是Node.js和Express.js，你可以使用cors npm package

如果你没有修改API的权限，那么试着写一个包装器API(或者你可以说一个代理API)，它将发出API请求并发送它的响应给你。

或者如果你只想让API请求只发生一次(在像componentDidMount这样的页面加载时)，你可以使用getServerSideProps。

有关如何修复CORS错误的更详细解释，请阅读Access-Control-Allow-Origin头是如何工作的?