https://zenn.dev/tmasuyama1114/books/vue-rails-chat/viewer/frontend-backend-integration
こちらの記事の内容をそのまま実行したところエラーとなりました。
バックエンド:Ruby on Rails ポート番号3000
フロントエンド:Vue ポート番号3001
として連携できているか、ボタンを押したらメッセージを返すようにしたところ以下のエラーとなります
エラー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>
corsをインストールしてポート番号も入れているのにcorsでエラーとなる理由がわからないです。
質問分かりにくかったらすみません
教えていただけると幸いです