【Nuxt.js】ローカル環境用にNuxtのCORS設定をする

code

2022.12.03 2021.03.28

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

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

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

今回の事象

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

corsエラーの解決策

next.config.js

modules: [
		‘@nuxtjs/proxy’	
	],
	axis: {
		proxy: true
	},
	proxy: {
		‘/api/’: {
			target: ‘https:対象URL’
			pathRewrite: {
				‘^/api/’ : ‘/‘
			}
		}
	}

modules: [

‘@nuxtjs/proxy’

axis: {

proxy: true

proxy: {

‘/api/’: {

target: ‘https:対象URL’

pathRewrite: {

‘^/api/’ : ‘/‘

}

これを設定することでlocalhost:3000に接続することができるようになります。
nuxt.jsにて対象のURLをリクエストのbaseURLに書き換えられます。それによってcorsのエラーが出なくなります。

最後に注意点

注意点を書いておこうかと思います。
これはローカル環境での設定になるので本番環境での構築の際には設定が異なります。実装環境などでしっかり動作するかの確認が必要です。

最後に

お疲れ様です。アップデートは解決できたでしょうか？
他にもエラー情報等も掲載してあるので読んでみて下さい。

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

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

【Nuxt.js設定】axiosの導入方法 | shinoblog より:

2021年4月3日 7:15 AM

[…] cors設定については、「nuxt.jsでのcors設定」に設定方法を書いてみているので参考にしてくて下さい。 […]

返信
【Vue.js】Access to XMLHttpRequest の解決策 | shinoblog より:

2021年4月14日 7:05 AM

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

返信
【Javaエラー・警告】トークン “=” に構文エラーがあります。このトークンを削除してください | shinoblog より:

2021年4月14日 8:55 PM

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

返信
【Nuxt.js】 command not found: $の解決策 | shinoblog より:

2021年4月15日 7:08 AM

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

返信
【Javaエラー】Must declare a named package because this compilation unit is associated to the named module | shinoblog より:

2021年4月16日 7:09 AM

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

返信
【Javaエラー】”文字定数が無効です” がなんで起きたのか | shinoblog より:

2021年4月17日 7:05 AM

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

返信
【Javaエラー】エスケープシーケンスの問題。¥が表示されない | shinoblog より:

2021年4月18日 7:04 AM

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

返信
【Javaエラー・警告】リソース・リーク: ‘‘ が閉じられることはありません | shinoblog より:

2021年4月20日 7:19 AM

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

返信
【Javaエラー・警告】Exception in thread “main” java.lang.Error: Unresolved compilation problem: 初期化されていない可能性があります | shinoblog より:

2021年4月21日 7:04 AM

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

返信
【Javaエラー・警告】Exception in thread “main” java.lang.ArrayIndexOutOfBoundsException: Index 5 out of bounds for length 5 | shinoblog より:

2021年4月22日 7:02 AM

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

返信
【Javaエラー・警告】Exception in thread “main” java.lang.NullPointerException | shinoblog より:

2021年4月23日 7:05 AM

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

返信
【Javaエラー・警告】Exception in thread “main” java.lang.Error: Unresolved compilation problem: length() を配列型 int[] で起動できません | shinoblog より:

2021年4月24日 7:00 AM

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

返信
【Javaエラー・警告】”VariableDeclarators” を挿入して LocalVariableDeclaration を完了してください | shinoblog より:

2021年4月25日 7:14 AM

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

返信
【Javaエラー・警告】Exception in thread “main” java.lang.Error: Unresolved compilation problem: メソッド tasu(int, int) は型 practices で未定義です | shinoblog より:

2021年4月26日 7:24 AM

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

返信
【functionエラー】Exceeded language worker restart retry count for runtime:node. Shutting down and proactively recycling the Functions Host to recover | shinoblog より:

2022年12月3日 10:24 PM

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

返信
【vueエラー】Error in nextTick: “TypeError: Cannot read property ‘__ob__’ of undefined” | shinoblog より:

2022年12月3日 10:24 PM

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

返信
【next.js】This is probably not a problem with npm. There is likely additional logging output above. | shinoblog より:

2022年12月3日 10:26 PM

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

返信
【next.jsエラー】node_modules/fs-extra/lib/mkdirs/make-dir.js:85 | shinoblog より:

2022年12月3日 10:28 PM

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

返信
【vueエラー】unknown action type: | shinoblog より:

2022年12月3日 10:29 PM

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

返信
【エラー解決】ReferenceError: $ is not defined | shinoblog より:

2022年12月3日 10:29 PM

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

返信
【vueエラー】Error in v-on handler: “TypeError: Cannot create property | shinoblog より:

2022年12月3日 10:30 PM

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

返信
【vueエラー】Error: Cannot find module ‘vue-loader-v16/package.json’ | shinoblog より:

2023年7月23日 8:34 AM

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

返信