Edited at

Nuxt.jsのメソッド内で外部APIを叩くとcorsエラーが起きる


環境

nuxt 2.8.1

@nuxtjs/axios: 5.3.6


問題

asyncDataだとできるのに

asyncData({ app, params, store }) {

const data = {key: "value"}
return app.$axios.$post([URL], data
).then(res => {
console.log(res)
})
},

普通のメソッドだとできない

getData: function(data) {

const res = this.$axios.$post([URL], data
).catch(error => {
console.log(error)
})

//結果
// Access to XMLHttpRequest at [URL] from origin 'http://localhost:3000' has been blocked by CORS policy:
// Response to preflight request doesn't pass access control check:
// No 'Access-Control-Allow-Origin' header is present on the requested resource.


理由:

asyncData() では、SSRにより表示を行うため、Proxyを挟まなくてもデータを取得できるため。

参考にした記事

SSR(ServerSideRendering)についてはこちらの記事が参考になりました。

React での ServerSideRendering 入門


解決方法

Proxyを導入しました。

@nuxtjs/axiosにある機能を使用し、以下の設定をした後、全てのエンドポイントの冒頭に /api/ をつけました。


nuxt.config.js

...

modules: [
'@nuxtjs/axios'
],

axios: {
proxy: true
},
proxy: {
'/api/': {target: 'YOUR API URL', pathRewrite: {'^/api/': '/'}}
},
plugins: [
{ src: 'plugins/axios.js', ssr: false }
],
...



plugins/axios.js

export default function({ $axios, redirect }) {

$axios.setToken('access_token')

$axios.onResponse(config => {
$axios.setHeader('Access-Control-Allow-Origin', 'YOUR API URL')
})
}


【参考記事】