CORS 対策をしつつ、Vue3 から Rails API を呼び出したい

Question

実現したいこと

• API サーバーへ GET リクエストを送り、結果を ブラウザのコンソールに表示したい

前提

Ruby on Rails で 作成した API に
Vue3 から GET リクエストを送信して、
結果をブラウザのコンソールに表示したいです。

発生している問題・エラーメッセージ

ブラウザのコンソールに以下が表示されています。
Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

GET http://localhost:5173/posts/1 500 (Internal Server Error)

vite.config.ts の proxy 設定に誤りがあるような気がするのですが、問題を特定できていません。

該当のソースコード

src/App.vue

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
import { ref } from 'vue'

const data = ref(null);
fetch("http://localhost:5173/posts/1")
.then(response => response.json())
.then(json => console.log(json))

</script>

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: { // CORS 対策
      '/posts/1': 'http://localhost/3000',
    }
  }
})

試したこと

curl での動作確認結果

curl localhost:3000/posts/1
{"id":1,"body":"ABC","created_at":"2023-10-29T12:24:31.739Z","updated_at":"2023-10-29T12:24:31.739Z"}

解決方法

サーバサイドの Rails アプリケーションに、CORSの設定が不足していました。
不足していた設定を追加することで解決しました。

# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin Ajax requests.

# Read more: https://github.com/cyu/rack-cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # 以下に、 http://localhost:5173 が不足していたため、追加したところ
解決 しました
    origins "http://localhost:3000", "http://localhost:5173"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

補足情報（FW/ツールのバージョンなど）

package.json

{
  "name": "keputonea",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "axios": "^1.6.0",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@tsconfig/node18": "^18.2.2",
    "@types/node": "^18.18.5",
    "@vitejs/plugin-vue": "^4.4.0",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "npm-run-all2": "^6.1.1",
    "prettier": "^3.0.3",
    "typescript": "~5.2.0",
    "vite": "^4.4.11",
    "vue-tsc": "^1.8.19"
  }
}

Answer 1

サーバサイドの Rails アプリケーションに、CORSの設定が不足していました。
不足していた設定を追加することで解決しました。

# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin Ajax requests.

# Read more: https://github.com/cyu/rack-cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # 以下に、 http://localhost:5173 が不足していたため、追加したところ解決 しました
    origins "http://localhost:3000", "http://localhost:5173"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Answer 2

curlで叩いてるport番号とvueで叩いてるport番号が異なるのでは？

Comments

[sutonea]

ありがとうございます。

試しに、vue のソースコード上のポート番号を curl で指定している 3000 に変更してみたところ、CORS に関するエラーが発生してしまいました。

```
Access to fetch at 'http://localhost:3000/posts/1' from origin 'http://localhost:5173' 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.
```