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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

2716閲覧

Nuxt.jsからAxiosでPOSTだけnet::ERR_CONNECTION_REFUSEDが返る

ogaway

総合スコア12

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2019/07/25 18:06

前提・実現したいこと

POSTだけが応答が返ってきません。

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

PostmanでAPI単体テストした際は、すべてのルートで正常に応答が返りOKでした。 作成した画面で検索して表示する際は、GETで投げて正常に表示できます。 更新はPUT、削除はDELETEで投げていてこちらもうまくいきます。 ですが、新規追加のPOSTだけが応答が返ってきません。 ChromeのデバックのNetWorkで監視しますと、 追加時だけしばらく応答が無く、5秒程度すると net::ERR_CONNECTION_REFUSEDが発生して 以下のヘッダ情報が返りステータスはfailedになります。 Request URL: http://localhost:8000/api/machines Referrer Policy: no-referrer-when-downgrade Provisional headers are shown Access-Control-Request-Headers: content-type Access-Control-Request-Method: GET Origin: http://xxx.com:3000 Referer: http://xxxx.com:3000/masters/machines

該当のソースコード

●Nuxt.jsでは、Vuexのストア内でaxiosを実行しています、 async storeHospital({ commit }, Machine) { const url = createUrl(); const data = { Machine_code: Machine.Machine_code, Machine_name: Machine.Machine_name }; await this.$axios.$post(url, data); }, ●Nuxt.jsは192.168.xx.xx:3000ポートにしています。 nuxt.config.jsのaxios設定ではプロキシを設定しています axios: { baseURL: 'http://localhost:8000', proxy: true }, proxy: { '/api': { target: 'http://localhost:8000' } }, ●Laravel側のルートは GET|HEAD | api/machines | machines.index 全件検索(Read) POST | api/machines | machines.store 新規追加(Create) PUT|PATCH | api/machines/{machine} | machines.update 更新(Update) GET|HEAD | api/machines/{machine} | machines.show 更新前の1件表示用(Read) DELETE | api/machines/{machine} | machines.destroy 削除(Delete) ●Laravelも同じIPで8000ポートにしています。 CORS対応としてbarryvdh/laravel-corsライブラリを入れています。 設定は 'supportsCredentials' => false, 'allowedOrigins' => ['*'], 'allowedHeaders' => ['Content-Type', 'X-Requested-With'], 'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT', 'DELETE'] 'exposedHeaders' => [], 'maxAge' => 0,

試したこと

LaravelでCORS対策をするまではGETしか動かなくて更新や削除の時はCORSエラーが出ていました。
CORS対策したらPOSTだけCORSエラーではなくレスポンスが返ってこないという感じです。
何かヘッダ情報を付与しないといけないとか、Laravel側の何か設定が足らないのか
手詰まりとなっています。
原因がわからずのままで、何か知恵をお貸しください。

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

フロントはNuxt.js、バックエンドをLarabel5.8でAPIだけの構成で
アプリケーションを作成しています。
フロントからはAxiosでリクエストを投げています。

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました。
Laravelの処理で
新規登録、更新、削除の処理の最後に
return redirect('api/machines');
を記述していましたが外したら綺麗に動きました。

投稿2019/07/26 01:08

ogaway

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問