axiosでのGETリクエストが失敗する ERR_CONNECTION_REFUSED
Q&A
Closed
解決したいこと
JavaScript、reactで作ったものでaxiosを使ってGETリクエストを送るとエラーが出ます。
バックエンドはplayで作成しPostgreSQLで作った適当なデータを取得表示するとこまではちゃんとできているんですけど、フロントエンドの方にうまくデータを送れません。
どなたかわかる方がいらっしゃいましたら教えてください。
発生している問題・エラー
//Vital.js:12がaxiosの文がある行です
Vital.js:12
GET http://localhost:9000/api/vital net::ERR_CONNECTION_REFUSED
（匿名） @ Vital.js:12
他 18 件のフレームを表示
Vital.js:17 axios requestに問題があります:
AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
code
:
"ERR_NETWORK"
config
:
{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message
:
"Network Error"
name
:
"AxiosError"
request
:
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
stack
:
"AxiosError: Network Error\n at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:111803:14)\n at Axios.request (http://localhost:3000/static/js/bundle.js:112255:41)"
[[Prototype]]
:
Error
constructor
:
ƒ AxiosError(message, code, config, request, response)
toJSON
:
ƒ toJSON()
isAxiosError
:
true
[[Prototype]]
:
Object
（匿名） @ Vital.js:17
Promise.catch（非同期）
（匿名） @ Vital.js:15
他 11 件のフレームを表示
該当するソースコード
// http://localhost:3000/vitalというページのコンポーネントがレンダリングされたタイミングで実行されるようにしています。
useEffect(() => {
axios.get('http://localhost:9000/api/vital')
.then(response => {
console.log("データの取得に成功しました。" + response.data)
})
.catch(error => {
console.error("axios requestに問題があります: ", error)
})
}, [])
@RestController
public class VitalController {
@Autowired
//JpaRepositoryを拡張したリポジトリです
private RiyousyaRepository riyousyaRepository;
@GetMapping("/api/vital")
//Riyousyaはname,idのフィールドを持つクラスです
public List<Riyousya> getData() {
//nameのListにしようとしてたらerrorが出たのでとりあえずこのオブジェクトを取得することにしています。
List<Riyousya> riyousyas = riyousyaRepository.findAll();
return riyousyas;
}
}
routes
GET /api/vital VitalController.getData
0
