【Vue.js】ローカル環境でのVueのCORS設定

code

2022.12.03 2021.03.27

毎日ボチボチプログラミングをしながら生活しています。その中での技術・エラーなどの紹介をしています。

今回は、vue.jsのエラーを紹介していきます。axiosを利用する時に、corsエラーが出ることが多くあります。vue.jsでの設定の方法を簡単に紹介していくので参考にしてみて下さい。

今回の事象
corsエラーの解決策
最後に注意点
最後に

今回の事象

vueアプリを作成して、 axiosを利用した時にcorsエラーが出なくなるためにcorsの設定をしておきます。corsにてエラーが出る理由としては、接続先と接続元のURLが異なるためエラーになっています。サーバ側に設定を入れることで対応することができます。

corsエラーの解決策

vue.confing.jsに設定を入れていきます。

module.exports = {
	devServer: {
		// 接続先のURL
		proxy: ‘http://localhost:3000’
	} 
}

module.exports = {

devServer: {

// 接続先のURL

proxy: ‘http://localhost:3000’

} 

これを設定することでlocalhost:3000に接続することができるようになります。

vue.jsはlocalhost:8080に初期になっているので、localhost:3000に接続することができるようになります。

最後に注意点

注意点を書いておこうかと思います。

これはローカル環境での設定になるので本番環境での構築の際には設定が異なることもあります。基本的には同じなので大丈夫かと思います。

最後に

お疲れ様です。アップデートは解決できたでしょうか？

他にもエラー情報等も掲載してあるので読んでみて下さい。

解決できなければ、Vue公式を確認してみるのもいいと思います。

ひと休憩の際におすすめ記事は「【Nuxt.js】ローカル環境にてcorsの設定方法」です。時間があれば読んでみて下さい。

【Nuxt】 is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. | shinoblog より:

2021年4月4日 7:01 AM

[…] ひと休憩の際におすすめ記事は「vue.jsでのcors設定」です。時間があれば読んでみて下さい。 […]

返信
【axios】 axios処理のgetにおけるパラメータの渡し方 | shinoblog より:

2021年4月5日 7:05 AM

[…] ひと休憩の際におすすめ記事は「vue.jsでのcors設定」です。時間があれば読んでみて下さい。 […]

返信
【JavaScript】axios async/await・Promise型を使ってみる | shinoblog より:

2021年4月6日 7:04 AM

[…] ひと休憩の際におすすめ記事は「vue.jsでのcors設定」です。時間があれば読んでみて下さい。 […]

返信
【Nuxtエラー】Uncaught (in promise) Error: Network Error | shinoblog より:

2021年4月7日 7:29 AM

[…] ひと休憩の際におすすめ記事は「vue.jsでのcors設定」です。時間があれば読んでみて下さい。 […]

返信
【解決】URL scheme must be “http” or “https” for CORS request | shinoblog より:

2021年4月8日 7:06 AM

[…] ひと休憩の際におすすめ記事は「vue.jsでのcors設定」です。時間があれば読んでみて下さい。 […]

返信
【Nuxtエラー】node_modules/eslint/lib/rules/no-octal-escape.js:41 SyntaxError: Invalid regular expression flags | shinoblog より:

2021年4月10日 7:04 AM

[…] ひと休憩の際におすすめ記事は「vue.jsでのcors設定」です。時間があれば読んでみて下さい。 […]

返信
【Nuxt】動的な継承〜v-bindとpropsを使ってみる〜 | shinoblog より:

2021年4月11日 7:02 AM

[…] ひと休憩の際におすすめ記事は「vue.jsでのcors設定」です。時間があれば読んでみて下さい。 […]

返信
【Nuxtエラー】npm ERR! missing script: dec | shinoblog より:

2021年4月12日 7:12 AM

[…] ひと休憩の際におすすめ記事は「vue.jsでのcors設定」です。時間があれば読んでみて下さい。 […]

返信
【Nuxtエラー】File ‘/Users/***/components/Logo.vue’ is not a module. | shinoblog より:

2021年4月13日 7:02 AM

[…] ひと休憩の際におすすめ記事は「vue.jsでのcors設定」です。時間があれば読んでみて下さい。 […]

返信