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

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

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

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

590閲覧

http://localhost:3000でのaxiosエラー

jud

総合スコア3

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/04/25 13:46

編集2023/04/28 19:50

実現したいこと

http://localhost:3000 のテスト環境でaxiosを使用してvpsサーバーのデータベースから情報を抽出したい。

前提

大変お世話になっております。http://localhost:3000 を使用した開発環境で、リモートのvpsサーバーに設置したファイルの表示等はローカル(自らのpc)にてhttp://localhost:3000 で表示されているのですが、axiosを使用して同じvpsサーバーに設置しているデータベースから情報を抽出しようとするとaxiosエラーが表示され、データベースから情報が抽出されません。

しかしながら本番環境用の実際のurlをhttp://localhost:3000 の代わりに使用し、npm run build 等その他諸々の作業をすると、データベースから情報を抽出し、エラーも出ず、サイトが表示されます。

同じ設定であるはずなのに、なぜhttps://xxxxx.com/a/api_top/users では問題ないのに、http://localhost:3000/a/api_top/users ではaxiosエラーが発生するのかご教授頂けませんでしょうか?

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

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …} code : "ERR_BAD_REQUEST" config : {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …} message : "Request failed with status code 404" name : "AxiosError" request : XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} response : config : {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …} data : "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot GET /a/api_top/users</pre>\n</body>\n</html>\n" headers : AxiosHeaders {access-control-allow-headers: '*', access-control-allow-methods: '*', access-control-allow-origin: '*', connection: 'keep-alive', content-length: '168', …} request : "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot GET /a/api_top/users</pre>\n</body>\n</html>\n" responseText : "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot GET /a/api_top/users</pre>\n</body>\n</html>\n" responseType : "" responseURL : "http://localhost:3000/a/api_top/users" responseXML : null status : 404 statusText : "Not Found" timeout : 0 upload : XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …} withCredentials : false [[Prototype]] : XMLHttpRequest status : 404 statusText : "Not Found" [[Prototype]] : Object stack : "AxiosError: Request failed with status code 404\n at settle (http://localhost:3000/static/js/bundle.js:49706:12)\n at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:48397:66)" [[Prototype]]

該当のソースコード

React, { useState, useEffect } from 'react'; import axios from 'axios'; import './css/Top.css'; function App() { const [users, setUsers] = useState([]); useEffect(() => { getUsers(); }, []); function getUsers() { axios.get(`http://localhost:3000/a/api_top/users`).then(function(response) { console.log(response.data); setUsers(response.data); }); } const url = "https://xxxxx.com/image/"; return ( <div className="App"> {Object.values(users).map((user, key) => <div id="pb_img"> <img src={url + user.top_image} ></img> </div> </div> )} </div> ); }

試したこと

本番環境用のurlを使用し、ビルド等をすると問題なくaxiosが機能しています。

function getUsers() {
axios.get(https://xxxxxxx.com/a/api_top/users).then(function(response) {
console.log(response.data);
setUsers(response.data);
});

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

axios@1.3.1
react-dom@18.2.0
react-scripts@5.0.1
react@18.2.0

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

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

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

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

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

mike2mike4

2023/04/25 14:52

localhostは自分の目の前にあるパソコンのドメインだからでは?
jud

2023/04/25 22:11

ご助言感謝いたします。vpsサーバーに設置したファイルの内容をhttp://localhost:3000で表示しております。ただ、同じvpsサーバーに設置しているmysqlにaxiosを使用してhttp://localhost:3000で接続しようとすると記載したエラーになります。この場合、axiosの箇所で指定するurlは具体的にどの様になりますでしょうか?
mike2mike4

2023/04/26 07:31

はい、hostsでlocalhostが127.0.0.1と結びつけられていて、axiosのアプリのIPが127.0.0.1であるなら、localhostで接続できます。 1.axiosアプリのIPはそもそもlocalhostですか? 独自のプライベートIPが振られてませんか? 2.ポート番号3000はテスト用のはずなので不要と思います。 3.httpとhttpsが入り交じってますが大丈夫ですか?
jud

2023/04/26 13:44

mike2mike4様、 お時間頂きまして大変感謝いたします。127.0.0.1がここでどうゆう役割をしているのかあまり分かっておりません。axiosはvpsサーバーにインストールしていますので、ip自体はvpsサーバーのipアドレスになると思います。httpとhttpsは大丈夫です。localhostやその他の様々な方法で試しておりましたが、同じ結果でした。
mike2mike4

2023/04/26 13:54

私も詳しいことはわかってませんが、そこで使っているlocalhostという定数は自分のパソコンを指すようになっているかと思われます。 え? まって、ReactということはJavaScriptですよね。動いてる環境は自分のパソコンですよね。なら、自分のPCを指すことになります。これがPHPやpythonでサーバー上で動いているのならリモートのIPを指すことになります。
jud

2023/04/28 10:50

mike2mike4様、 ご助言頂き感謝致します。未だに何がどう作用しているのか分かっておりませんが、あれこれと試していこうと思います。それではお時間を頂き本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問