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

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

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

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

【Nuxt.js】API連携での「connect ECONNREFUSED 127.0.0.1:80」エラーを解決したい

tanoken729
tanoken729

総合スコア1

Nuxt.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

1回答

0グッド

0クリップ

10020閲覧

投稿2021/05/31 09:16

編集2021/05/31 09:17

【Nuxt.js】API連携での「connect ECONNREFUSED 127.0.0.1:80」エラーを解決したい

状況

laravel apiとnuxtの連携テストで以下エラーが出て、解消できない

connect ECONNREFUSED 127.0.0.1:80

質問

PostmanでAPIリクエストしたところ、データは問題なく返ってきているので、nuxt側の設定が間違っている認識なのですが、解決方法を見つけ出せず、、

イメージ説明

お力をお貸しいただけないでしょうか。。
よろしくお願い致しますmm

ファイル設定

src/routes/api.php

php

1<?php 2 3use Illuminate\Http\Request; 4use Illuminate\Support\Facades\Route; 5 6/* 7|-------------------------------------------------------------------------- 8| API Routes 9|-------------------------------------------------------------------------- 10| 11| Here is where you can register API routes for your application. These 12| routes are loaded by the RouteServiceProvider within a group which 13| is assigned the "api" middleware group. Enjoy building your API! 14| 15*/ 16 17Route::middleware('auth:api')->get('/user', function (Request $request) { 18 return $request->user(); 19}); 20 21Route::get('test', function() { 22 return response()->json(['name' => '山田太郎', 'gender' => '男','mail' => 'yamada@test.com']); 23}); 24

nuxt.config.js

js

1export default { 2 // Global page headers: https://go.nuxtjs.dev/config-head 3 head: { 4 title: 'sound-matching', 5 htmlAttrs: { 6 lang: 'en' 7 }, 8 meta: [ 9 { charset: 'utf-8' }, 10 { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 11 { hid: 'description', name: 'description', content: '' } 12 ], 13 link: [ 14 { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 15 ] 16 }, 17 18 // Global CSS: https://go.nuxtjs.dev/config-css 19 css: [ 20 ], 21 22 // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins 23 plugins: [ 24 ], 25 26 // Auto import components: https://go.nuxtjs.dev/config-components 27 components: true, 28 29 // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules 30 buildModules: [ 31 ], 32 33 // Modules: https://go.nuxtjs.dev/config-modules 34 modules: [ 35 '@nuxtjs/axios', 36 '@nuxtjs/proxy' 37 ], 38 axios: { 39 baseURL: 'http://localhost:3000' 40 }, 41 proxy: { 42 '/api': 'http://sound-matching_api_app_1:8000/api/test', 43 }, 44 45 // Build Configuration: https://go.nuxtjs.dev/config-build 46 build: { 47 } 48} 49

pages/index.vue

vue

1<template> 2<div class="wrapper"> 3 <Header /> 4 <main class="main"> 5 <nav class="side-bar"> 6 <h3>感情アイコン</h3> 7 <ul class="emotion"> 8 <li>喜</li> 9 <li>怒</li> 10 <li>哀</li> 11 <li>楽</li> 12 </ul> 13 <h3>ジャンル</h3> 14 <ul class="genre"> 15 <li>ジャンル名</li> 16 <li>ジャンル名</li> 17 <li>ジャンル名</li> 18 <li>ジャンル名</li> 19 <li>ジャンル名</li> 20 </ul> 21 </nav> 22 <div class="content"> 23 <p>{{data}}</p> 24 <p>音声ファイル</p> 25 <p>音声ファイル</p> 26 <p>音声ファイル</p> 27 <p>音声ファイル</p> 28 <p>音声ファイル</p> 29 </div> 30 <div> 31 <h1>Laravel & Nuxt.js</h1> 32 <h2>URL</h2> 33 {{ url }} 34 <h2>Result</h2> 35 {{ message }} 36 </div> 37 </main> 38</div> 39</template> 40 41<script> 42import Header from "@/components/header.vue"; 43 44export default { 45 components: { 46 Header, 47 }, 48 async asyncData({app}) { 49 const url = 'http://localhost/api/test' //Laravel の API URI 50 const message = await app.$axios.$get(url) 51 return { 52 url, 53 message 54 }; 55 } 56}; 57</script> 58 59<style scoped> 60/* * { 61 outline: solid 1px #000; 62} */ 63/* メイン */ 64.main { 65 display: flex; 66} 67/* サイドバー */ 68.side-bar { 69 border: solid 1px; 70 padding: 10px; 71} 72.side-bar ul { 73 list-style: none; 74 padding: 0; 75} 76.side-bar li { 77 padding: 10px; 78} 79.emotion li { 80 padding-left: 45px; 81} 82/* メインコンテンツ */ 83.content { 84 display: flex; 85 padding: 10px; 86} 87.content p { 88 padding: 10px; 89} 90</style>

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

ポート番号が指定されておらず、エラーになっているかと思います。
下記のコードを変更していただければ動きそうですがいかがてしょうか?

変更前
const url = 'http://localhost/api/test' //Laravel の API URI

変更後
const url = 'http://localhost:8000/api/test' //Laravel の API URI

投稿2021/05/31 18:34

m2l

総合スコア318

tanoken729👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

tanoken729

2021/06/04 15:54 編集

ご回答ありがとうございますmm ご教授いただいたこと含め以下のようにして解決しました。なぜかasyncdataが使えないということがおきました・・原因は未だ不明なのですが、何かご存知たったりしますでしょうか。。 ``` mounted () { axios.get('http://localhost:8000/api/test') .then((res) => { console.log(res.data) this.message = res.data }) .catch((error) => { console.log(error) }) } ```
m2l

2021/06/05 11:56

少し憶測も含まれてしまうこと、ご了承ください。 return値がjsonではないからかなと思いました。 下記ですといかがでしょうか? --- return { url: url, message: message } ---

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Nuxt.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。