0

以下の記事の内容をそのまま実行したところエラーとなりました。

フロントエンドとバックエンドの連携

バックエンド:Ruby on Rails ポート番号3000
フロントエンド:Vue ポート番号3001

として連携できているか、ボタンを押したらメッセージを返すようにしたところ以下のエラーとなります。

corsをインストールしてポート番号も入れているのにcorsでエラーとなる理由がわからないです。
質問分かりにくかったらすみません、教えていただけると幸いです。

エラー1

Access to fetch at 'http://localhost:3000/api/test' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

エラー2

GET http://localhost:3000/api/test net::ERR_FAILED 200 (OK)

エラー3

Uncaught (in promise) TypeError: Failed to fetch
    at Proxy.test (ApiTest.vue:18:7)
    at _createElementVNode.onClick._cache.<computed>._cache.<computed> (ApiTest.vue:4:21)
    at callWithErrorHandling (vue.js?v=621bc767:1659:19)
    at callWithAsyncErrorHandling (vue.js?v=621bc767:1666:17)
    at HTMLButtonElement.invoker (vue.js?v=621bc767:10297:5)

試したこと

  1. rails内のgemfileでgem "rack-cors"を追加して、bundle installを実行

  2. config/initializers/cors.rbに以下の内容を追加

     Rails.application.config.middleware.insert_before 0, Rack::Cors do
       allow do
         origins "lacalhost:3001" # Vue.jsを動作させているアドレスとポート番号
    
         resource "*", 
           headers: :any, 
           methods: [:get, :post, :put, :patch, :delete, :options, :head]
       end
     end
    

App.vue

<template>
  <div id="app">
    <router-view />
    <ApiTest />
  </div>
</template>

<script>
import ApiTest from './components/ApiTest.vue'

export default {
  name: 'App',
  components: {
    ApiTest
  }
}
</script>

ApiTest.vue

<template>
  <div>
    <h1>ApiTest</h1>
    <button @click="test">ApiTest</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    test() {
      fetch('http://localhost:3000/api/test')
        .then((response) => response.json())
        .then((data) => {
          this.message = data.message
        })
    }
  }
}
</script>

追記:実行環境はwindows11 64ビットです
手持ちのmacbook(m1)で同じことをしたらエラーにならなかったです。
windowsではエラーのままです

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。