実現したいこと
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
あなたの回答
tips
プレビュー