このエラーは指定したlocalhostが作られていないだけなのですか？
解決したいこと
このようなエラーが出てきたのですが、これはajax通信するときのlocalhostを指定したのですが、まだそのlocalhostが作られていなだけのエラーですか？
下のリンクでこれと似たエラーの対処法みたいなのがあったのですが、説明を見ても理解できなかったので、質問させていただきました。
0
2Answer
この情報だけでは特定はできませんが
Vue.jsを使用されているようなので
開発サーバを使用していると仮定すると
- 開発サーバが起動されていない
# npm run serve
- vue.config.jsに指定されているポートが3000番ではない
vue.config.js
module.exports = {
devServer: {
port: 3000,
},
};
は確認してみても良いと思います。
1Like
Comments
@akihiro-inagaki
Questioner
回答ありがとうございます、ポートが指定されてなかったので、babel.config.jsというファイルに
```js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
devServer, {
port: 3000,
}
]
}
```
と記述してyarn serveしたところ
```terminal
Error while loading config - devServer is not defined
```
と書かれていたのですが、devServerって何を指しているのか教えてほしいです。- > 回答ありがとうございます、ポートが指定されてなかったので、babel.config.jsというファイルに
babel.config.jsと、vue.config.jsは別物です。
> devServerって何を指しているのか教えてほしいです。
devServerについては
https://cli.vuejs.org/config/#devserver
どのような環境で問題が発生しているのか追記されたほうが、
正確なアドバイスが得られると思います。
■参考URL
□vue.config.jsについては（Configuration Reference）
https://cli.vuejs.org/config/#global-cli-config
□一応、webpack.config.jsについては（Configuration）
https://webpack.js.org/configuration/
よろしくお願いします。 @akihiro-inagaki
Questioner
ありがとうございます、ポートが3000に変わりました。
既にクローズ済みとなっているので返信不要です。
推測ですが、
Vue.js(+axios)のサーバとは別に
Web APIのサーバ（こちらが、localhost:3000に該当）が存在し、
axiosを使って、Web APIを呼び出すようなプログラムではないでしょうか？
なので、Web APIのサーバが実行されているかどうか
（ローカルで実行されていないのであれば、localhostではありません）
Web APIのサーバのポートが3000になっているかどうか
を確認する必要があると思われます。
1Like
Comments
@akihiro-inagaki
Questioner
ありがとうございます、webAPIは使用していないです。
あと、よく見たらエラー内容が変更されていました。
```terminal
xhr.js?b50d:177 POST http://localhost:3000/User/ 404 (Not Found)
```
このようなエラーになっていました、これを調べても英語しか出てこなかったです。- > ありがとうございます、webAPIは使用していないです。
コードを斜め読みした感じ、会員情報の操作はWeb APIを呼び出して行う形になっています。
（漏れがあるかもしれませんが）
その問い合わせ先が「http://localhost:3000/User/...」という実装なので
現在実装されているコードとは別に、会員情報の操作を行う、Web APIを準備する必要があります。
簡易構成
[Vue.jsが実行されているサーバ] ← 実装されているコード
|
|(http通信)
|
[Web APIが実行されているサーバ(ポート:3000)]
一旦参考にされているドキュメント等を確認しなおして頂くのが良いかと思います。
■参考URL
vue.js と axios を使って Web API にアクセスする - Axios を使う
https://www.xlsoft.com/jp/blog/blog/2019/10/30/post-7786/#Axios @akihiro-inagaki
Questioner
ありがとうございます、直してみます。@akihiro-inagaki
Questioner
確認させていただきたいのですが、
>会員情報の操作を行う、Web APIを準備する必要があります。
フロント側では、サインアップページで入力してもらった値をlocalhostに送るだけで会員情報の操作などは、サーバー側でしてもらおうとしているのですが、あとはサーバー側が会員情報の操作するものを作ったらエラー解消するって感じですか？- >>会員情報の操作を行う、Web APIを準備する必要があります。
>フロント側では、サインアップページで入力してもらった値をlocalhostに送るだけで会員情報の操作などは、サーバー側でしてもらおうとしているのですが、あとはサーバー側が会員情報の操作するものを作ったらエラー解消するって感じですか？
まず「localhost」というホスト名は、ローカルマシンを指定する特別な名前です。
サーバー側が会員情報の操作するもの（Web API）を準備するのであれば
そのサーバーのWeb APIを呼び出すようにすれば、エラーは解決すると思われます。
このサーバーが、ローカルマシン上であればlocalhostですし、
別のマシンであればlocalhostではありません。
なので
フロント側では、サインアップページで入力してもらった値をサーバー側に送るだけで会員情報の操作などは、サーバー側でしてもらおうとしているのですが、あとはサーバー側が会員情報の操作するものを作って、フロント側からサーバー側を呼び出す用URL等を修正すれば、エラー解消する
と思われます。
参考URL
https://e-words.jp/w/%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%9B%E3%82%B9%E3%83%88.html @akihiro-inagaki
Questioner
ありがとうございます、すっきりしました。