Nuxt.js服务端渲染使用axios作为网络库问题
发布于 12天前 作者 liudg 122 次浏览 来自 问答

问题: 使用nuxt做前后端分离,利用axios作为请求库,后端采用php语言,设置了跨域

header(‘Access-Control-Allow-Origin: 域名’); header(‘Access-Control-Allow-Credentials: true’); header(‘Access-Control-Allow-Methods: GET,POST,PUT,DELETE,TRACE,OPTIONS,PATCH’); header(‘Access-Control-Allow-Headers: Origin,X-Requested-With,Content-Type,Accept,withCredentials’);

访问本地的php后端拉去数据一切正常,当访问线上部署的php后端时出异常,下面是axios异常信息:

{ Error: Parse Error at Socket.socketOnData (_http_client.js:454:20)
at emitOne (events.js:115:13) at Socket.emit (events.js:210:7) at
addChunk (_stream_readable.js:266:12) at readableAddChunk
(_stream_readable.js:253:11) at Socket.Readable.push
(_stream_readable.js:211:10) at TCP.onread (net.js:585:20)
bytesParsed: 818, code: ‘HPE_INVALID_HEADER_TOKEN’, config: { adapter:
[Function: httpAdapter], transformRequest: { ‘0’: [Function:
transformRequest] }, transformResponse: { ‘0’: [Function:
transformResponse] }, timeout: 0, xsrfCookieName: ‘XSRF-TOKEN’,
xsrfHeaderName: ‘X-XSRF-TOKEN’, maxContentLength: -1, validateStatus:
[Function: validateStatus], headers: { Accept: ‘application/json,
text/plain, /’, ‘User-Agent’: ‘axios/0.16.2’ }, baseURL: ‘域名’,
withCredentials: true, method: ‘get’, url: ‘域名/Page/gameList’, data:
undefined }, request: 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, bufferedRequest: null,
lastBufferedRequest: null, pendingcb: 0, prefinished: false,
errorEmitted: false, bufferedRequestCount: 0, corkedRequestsFree:
[Object] }, writable: true, domain: null,
_events: { response: [Function: handleResponse], error: [Function: handleRequestError] },
_eventsCount: 2,
_maxListeners: undefined,
_options: { maxRedirects: 21, protocol: ‘http:’, hostname: ‘域名’, port: null, path: ‘/Page/gameList’, method: ‘get’, headers: [Object], agent:
undefined, auth: undefined, pathname: ‘/Page/gameList’ },
_redirectCount: 0,
_bufferedWrites: [],
_onNativeResponse: [Function],
_currentRequest: ClientRequest { domain: null,
_events: [Object],
_eventsCount: 5,
_maxListeners: undefined, output: [], outputEncodings: [], outputCallbacks: [], outputSize: 0, writable: false,
_last: true, upgrading: false, chunkedEncoding: false, shouldKeepAlive: false, useChunkedEncodingByDefault: false, sendDate:
false,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: 0,
_hasBody: true,
_trailer: ‘’, finished: true,
_headerSent: true, socket: [Object], connection: [Object],
_header: ‘GET /Page/gameList HTTP/1.1rnAccept: application/json, text/plain, /rnUser-Agent: axios/0.16.2rnHost: 域名rnConnection:
closernrn’,
_onPendingData: [Function: noopPendingOutput], agent: [Object], socketPath: undefined, timeout: undefined, method: ‘GET’, path:
‘/Page/gameList’,
_ended: false, res: null, aborted: undefined, timeoutCb: null, upgradeOrConnect: false, parser: null, maxHeadersCount: null,
_redirectable: [Circular], [Symbol(outHeadersKey)]: [Object] },
_currentUrl: ‘域名/Page/gameList’ }, response: undefined }

response为undefined。用jquery的ajax测试过跨域是能拿到数据的。

一个奇怪的问题: 如果第一次打开nuxt项目的页面不包含有axios网络请求去php后端拿数据的话,页面一切正常,而且点击其他有网络请求的页面也是能正常访问。当第一次打开的页面需要去php后端拿数据的话就抛出上面的那个异常。

期待各位帮忙解答,谢谢

回到顶部