CORS ヘッダー

はじめに

nuxtのaxiosでjsonデータを取得しようとした時に「(理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。ステータスコード: 200」というエラーが出てしまったのでその対処方法をご紹介します。

前提

Nuxt.jsを使用している
axiosでデータの取得をする

proxyをインストール

npm install @nuxtjs/proxy

nuxt.config.jsに以下を追加

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
   '/api/': { target: 'http://backend:3000', pathRewrite: { '^/api/': '/' } },
   }

axiosの書き方

 axios.get('/api/ranking_person.json')
      .then((response) => {
        console.log(response.data)
      })

参考文献

https://codelikes.com/nuxt-axios-and-proxy/