質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

1回答

6237閲覧

axiosでdeleteメソッドでParse Errorが発生する

Entlassen

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

1グッド

0クリップ

投稿2017/08/07 02:32

編集2022/01/12 10:55

###前提・実現したいこと
AWS Lambdaからaxiosを利用してDELETEリクエストを送信したいと考えています。

###発生している問題・エラーメッセージ

axiosのdeleteメソッドを利用して、deleteリクエストを送信したいのですが、どうしても下記のようにParse Errorが発生してしまいます。

ちなみに送信先のサーバ(https://my-api)はリクエストを正常に受け取れており、処理も正常に完了しています。

{ Error: Parse Error at TLSSocket.socketOnData (_http_client.js:411:20) at emitOne (events.js:96:13) at TLSSocket.emit (events.js:191:7) at readableAddChunk (_stream_readable.js:178:18) at TLSSocket.Readable.push (_stream_readable.js:136:10) at TLSWrap.onread (net.js:561:20) bytesParsed: 470, code: 'HPE_INVALID_CONSTANT', 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, */*', 'X-Request-Id': 'offline_awsRequestId_354696436885517', 'User-Agent': 'axios/0.16.2' }, method: 'delete', url: 'https://my-api/v1/users/66', data: undefined }, request: Writable { _writableState: WritableState { objectMode: false, highWaterMark: 16384, needDrain: false, ending: false, ended: false, finished: 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, _redirectCount: 0, _onNativeResponse: [Function], _currentRequest: ClientRequest { domain: null, _events: [Object], _eventsCount: 5, _maxListeners: undefined, output: [], outputEncodings: [], outputCallbacks: [], outputSize: 0, writable: true, _last: true, upgrading: false, chunkedEncoding: false, shouldKeepAlive: false, useChunkedEncodingByDefault: false, sendDate: false, _removedHeader: {}, _contentLength: 0, _hasBody: true, _trailer: '', finished: true, _headerSent: true, socket: [Object], connection: [Object], _header: 'DELETE /v1/users/66 HTTP/1.1\r\nAccept: application/json, text/plain, */*\r\nX-Request-Id: offline_awsRequestId_354696436885517\r\nUser-Agent: axios/0.16.2\r\nHost: my-api\r\nConnection: close\r\n\r\n', _headers: [Object], _headerNames: [Object], _onPendingData: null, agent: [Object], socketPath: undefined, timeout: undefined, method: 'DELETE', path: '/v1/users/66', _ended: true, res: [Object], aborted: undefined, timeoutCb: null, upgradeOrConnect: false, parser: null, maxHeadersCount: null, _redirectable: [Circular] }, _currentUrl: 'https://my-api:443/v1/users/66' }, response: undefined }

###該当のソースコード

import axios from "axios"; import {AxiosInstance, AxiosResponse} from "axios"; const sendDeleteRequest = async (url: string, requestConfig: AxiosRequestConfig) => { try { const axiosResponse: AxiosResponse = await axios.delete( url, requestConfig ); return Promise.resolve(axiosResponse); } catch (error) { console.error(error); return Promise.reject(error); } }; const requestConfig = { headers: { "X-Request-Id": "offline_awsRequestId_2446060261876728" } }; // 呼び出しは↓のような形で行っています const axiosResponse: AxiosResponse = await sendDeleteRequest( "https://my-api/v1/users/66", requestConfig );

###試したこと

  • 送信しているカスタムHTTPHeader(X-Request-Id)を指定しないで送信(結果は同じでした)
  • axios.delete を利用しないで axios.request を使用(結果は同じでした)

ちなみにカスタムHeaderを付けなくても以下のHeaderは自動的に作成されてしまいます。

{ Accept: 'application/json, text/plain, */*', 'User-Agent': 'axios/0.16.2' }

https://my-api は204 を返すのでbodyを返さない実装になっています。
予想ですが、AcceptHeaderが設定されてしまっているので、bodyを変換しようとしてErrorになっているという仮説を立てています。

何とかしてAcceptHeaderを指定しない等のoptionが使えれば良いのですが、良い方法が今のことろ見つかっていません。

###補足情報(言語/FW/ツール等のバージョンなど)

  • TypeScript(2.4.1)
  • axios(0.16.2)

※このコードはAWS Lambda上で実行されています。

shuntksh👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

HPE_INVALID_CONSTANTはざっと調べたところ、サーバのHTTP Responseがクライアントの期待するものと違う場合に投げられるようです。レスポンスのどの部分で失敗しているのかは、ダンプを見てみないとわかりませんが、 コードを見ると、Axiosは単にJSON.parseしているようなので、レスポンスがパースできない形式(Undefinedなど)だとThrowしてしまうようですね。

またAxiosのIssueを見ると、204のハンドリング(なぜかContent-Lengthがセットされている、いない、Bodyが空文字列か本当にEmptyかどうか、など)でいろいろ議論があるみたいなので、実際にサーバからどのようなレスポンスが返ってきているのかをCurlコマンドなどで確かめるほうが良いかもしれません。

ちなみにハックになりますが、axiosのTransform Response機能を使って、戻り値をパース可能なデータに変換するという方法が考えられます。

#以下のコードはテストしてませんので、そのままでは動かないかもしれません

ts

1config = { 2 ...config, 3 transformResponse: [ 4 (data) => { 5 try { 6 JSON.parse(data) 7 } catch (x) { 8 data = data || {}; 9 } 10 return data; 11 } 12 ] 13} 14const res = await axios.delete(url, config);

投稿2017/08/07 18:11

shuntksh

総合スコア196

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Entlassen

2017/08/10 01:58

ご回答ありがとうございます。 通信先のAPIのレスポンスBodyは定義されていないのでUndefinedが入っていましたので、ご指摘の通りの現象が起こっておりました。 今別の課題に取り組んでおり本件から一時離れているので、今の仕事が終わり次第、Transform Responseでの方法を試してみようと思います。 ※Transform Responseの方法の確認が取れたら解決済、ベストアンサーとさせて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問