nuxtでaxiosの処理をstoreに移設したらCORSでネットワークエラーになる
自己解決しました。
{withCredentials: true}をaxiosのとこに追加したら動きました。
getjson.jsがindex.jsになっているのは、nuxtServerInitを使うためなので関係ないはず。
参考
https://qiita.com/att55/items/2154a8aad8bf1409db2b
解決後
store>index.js
import axios from 'axios'
export const state = () => ({
items: []
})
export const mutations = {
setItems (state, items) {
state.items = items
}
}
export const actions = {
async nuxtServerInit({ commit }) {
const { data } = await axios.get('https://script.google.com/macros/s/id', {withCredentials: true})
commit('setItems', data)
}
}
export const getters = {
getItems: (state) => state.items
}
もともとの質問
nuxtで作成中のウェブアプリケーションで、pages配下の各vueファイル内でaxiosを使ってAPIと通信していた処理を、storeにまとめてvuexのactionで実行するように修正したところ、CORSで弾かれてネットワークエラーとなりました。
npm run build && npm run exportで吐き出した静的ファイルを、FTPでオンプレのサーバーにデプロイしています。
vueファイル内だとデータを取得できるのに、vuexだとネットワークエラーになるのは、何が原因なのでしょうか…
before
pages.vue
<script>
import axios from "axios"
export default {
async asyncData({ $axios }) {
//スプレッドシートからページタイトルとURLのjsonデータを取得
const url = 'https://script.google.com/macros/s/id';
const response = await $axios.$get(url);
return { result: response }
}
}
</script>
after
pages.vue
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
created() {
this.$store.dispatch("getjson/fetchItems");
},
computed: {
...mapGetters({
jsonData: 'getjson/getItems'
})
}
};
</script>
store>getjson.js
import axios from 'axios'
export const state = () => ({
items: []
})
export const mutations = {
setItems (state, items) {
state.items = items
}
}
export const actions = {
async fetchItems({ commit }) {
const { data } = await axios.get('https://script.google.com/macros/s/id')
commit('setItems', data)
}
}
export const getters = {
getItems: (state) => state.items
}
0
