Nextjs在getServerSideProps上无故失败
Nextjs在getServerSideProps上无故失败
提问于 2022-08-23 10:59:17
我在学NextJS ..。我有一个API (在Laravel中)，它有一个端点/api/user，它受到令牌的保护，只返回一个非常简单的用户对象，如下所示；
{
"data": {
"id": "2",
"name": "Testing User",
"email": "testing@mctestface.com",
"updated_at": "2022-08-23T10:39:32.000000Z",
"created_at": "2022-08-23T10:39:32.000000Z"
}
}我试图在user settings中创建一个NextJS页面.我使用存储为cookie的令牌访问用户端点，如果响应为200，则设置props。如果失败，应该将用户重定向到登录页面。但是每当我点击该页面时，它都会显示404页，这意味着它似乎正在进入try块的catch部分.我用令牌测试了api端点，它运行得很好，当我在下面使用它时，它就会失败；
import React from 'react'
import httpRequest from '@/lib/httpRequest'
import { getCookie } from '@/lib/session'
const Settings = ({ dashboardUser }) => {
return (
<div>
<p>Protected Page</p>
</div>
)
}
export async function getServerSideProps({ req }) {
try {
const resDashboardUser = await httpRequest.get({
url: '/api/user',
token: getCookie('token', req)
})
if (resDashboardUser.status === 200) {
return {
props: {
dashboardUser: resDashboardUser.data
}
}
}
} catch (error) {
if (error?.response?.status === 401) {
return {
redirect: {
destination: '/login',
permanent: false
}
}
}
return {
notFound: true
}
}
}
export default Settings下面是get的httpRequest函数
get: ({ baseUrl = process.env.NEXT_PUBLIC_BACKEND_URL, url, token, params }) => {
return axios({
timeout: process.env.NEXT_PUBLIC_API_TIMEOUT,
method: 'get',
baseURL: baseUrl,
url: url,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: 'Bearer ' + token || ''
},
params: params
});
},任何帮助都将不胜感激。
我所看到的错误如下；
Promise { <pending> }
error - unhandledRejection: AxiosError: connect ECONNREFUSED 127.0.0.1:80
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1138:16) {
port: 80,
address: '127.0.0.1',
syscall: 'connect',
code: 'ECONNREFUSED',
errno: -111,
config: {
transitional: {
silentJSONParsing: true,
forcedJSONParsing: true,
clarifyTimeoutError: false
},
adapter: [Function: httpAdapter],
transformRequest: [ [Function: transformRequest] ],
transformResponse: [ [Function: transformResponse] ],
timeout: '30000',
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
maxBodyLength: -1,
env: { FormData: [Function] },
validateStatus: [Function: validateStatus],
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: 'Bearer 8|jcL6IL08oMqKET2r0Skhjx1Dw02UTeToNukQpqm4',
'User-Agent': 'axios/0.27.2'
},
method: 'get',
baseURL: 'http://localhost',
url: '/api/user',
data: undefined
},
request: <ref *1> Writable {
_writableState: WritableState {
objectMode: false,
highWaterMark: 16384,
finalCalled: false,
needDrain: false,
ending: false,
ended: false,
finished: false,
destroyed: false,
decodeStrings: true,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: true,
bufferProcessing: false,
onwrite: [Function: bound onwrite],
writecb: null,
writelen: 0,
afterWriteTickInfo: null,
buffered: [],
bufferedIndex: 0,
allBuffers: true,
allNoop: true,
pendingcb: 0,
constructed: true,
prefinished: false,
errorEmitted: false,
emitClose: true,
autoDestroy: true,
errored: null,
closed: false,
closeEmitted: false,
[Symbol(kOnFinished)]: []
},
_events: [Object: null prototype] {
response: [Function: handleResponse],
error: [Function: handleRequestError],
socket: [Array]
},
_eventsCount: 3,
_maxListeners: undefined,
_options: {
maxRedirects: 21,
maxBodyLength: 10485760,
protocol: 'http:',
path: '/api/user',
method: 'GET',
headers: [Object],
agent: undefined,
agents: [Object],
auth: undefined,
hostname: 'localhost',
port: null,
nativeProtocols: [Object],
pathname: '/api/user'
},
_ended: true,
_ending: true,
_redirectCount: 0,
_redirects: [],
_requestBodyLength: 0,
_requestBodyBuffers: [],
_onNativeResponse: [Function (anonymous)],
_currentRequest: ClientRequest {
_events: [Object: null prototype],
_eventsCount: 7,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: true,
chunkedEncoding: false,
shouldKeepAlive: false,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: false,
sendDate: false,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: 0,
_hasBody: true,
_trailer: '',
finished: true,
_headerSent: true,
_closed: false,
socket: [Socket],
_header: 'GET /api/user HTTP/1.1\r\n' +
'Accept: application/json\r\n' +
'Content-Type: application/json\r\n' +
'Authorization: Bearer 8|jcL6IL08oMqKET2r0Skhjx1Dw02UTeToNukQpqm4\r\n' +
'User-Agent: axios/0.27.2\r\n' +
'Host: localhost\r\n' +
'Connection: close\r\n' +
'\r\n',
_keepAliveTimeout: 0,
_onPendingData: {},
agent: [Agent],
socketPath: undefined,
method: 'GET',
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
path: '/api/user',
_ended: false,
res: null,
aborted: false,
timeoutCb: null,
upgradeOrConnect: false,
parser: null,
maxHeadersCount: null,
reusedSocket: false,
host: 'localhost',
protocol: 'http:',
_redirectable: [Circular *1],
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype]
},
_currentUrl: 'http://localhost/api/user',
_timeout: null,
[Symbol(kCapture)]: false
}
}回答 3
Stack Overflow用户
发布于 2022-08-24 21:46:19
不要从getServerSideProps向api路由发出http请求，而是将代码从api/users移动到getServerSideProps。在getServerSideProps中做服务器端的工作.
getServerSideProps是服务器端代码，即使它位于客户端文件中.当您从api/users或其他静态函数调用服务器端路由(例如api/users)时，它无法工作。
让我知道那是怎么回事。
同时。。。
如果您没有发送http请求来获取cookie，那么重构后的一些注释可能是不相关的。但值得一提的是。
在NextJS中发出http请求时，fetch比httpRequest更容易，前提是它适合您的情况。
在发送https请求时，尝试添加async / await来处理axios、fetch或httpRequest返回的Promises。
下面是一个例子。
get: async ({ baseUrl = process.env.NEXT_PUBLIC_BACKEND_URL, url, token, params }) => {
return await axios({
timeout: process.env.NEXT_PUBLIC_API_TIMEOUT,
method: 'get',
baseURL: baseUrl,
url: url,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: 'Bearer ' + token || ''
},
params: params
});
},当您看到Promise { <pending> }时，这意味着您需要处理Promise来获取所需的实际数据。Promise只是页面加载时不存在的值的占位符。该值在加载时不存在，因为axios必须请求和接收它。
当您看到error - unhandledRejection: AxiosError:时，这表明错误可能是因为代码没有处理Promise。
您可以使用Promises或async / await来处理。使用哪一种通常取决于情况和您的喜好。在这里，async / await是有意义的。
但是，对于您的情况，我认为http请求是有问题的，因为getServerSideProps和api路由不能一起工作。祝你好运！
Stack Overflow用户
发布于 2022-08-27 14:22:05
当您在getServerSideProps中提出请求时，必须传递完整的url。当您在服务器上时，您无法访问host。next-absolute-url包将为我们提供主机
import absoluteUrl from 'next-absolute-url'
export async function getServerSideProps({ req }) {
const { origin } = absoluteUrl(req);
try {
const resDashboardUser = await httpRequest.get({
url: `${origin}/api/user`,
token: getCookie('token', req)
})
.....Stack Overflow用户
发布于 2022-08-29 16:41:11
您需要在NEXT_PUBLIC_BACKEND_URL值中指定运行Laravel的端口。
假设Laravel在端口8080上运行，您应该将环境变量更新为以下内容。
NEXT_PUBLIC_BACKEND_URL=http://localhost:8080页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73457513
复制相关文章
相似问题
腾讯云开发者
