.NET CoreのWebAPIプロジェクトのデフォルトで作成されるAPIへのVue.js3による疎通チェック

.NET Core のWebApiプロジェクトのデフォルトで作成されるApiに接続するための vue.js 3 の設定。

vite.config.js

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: {
      "/api": {
        target: "https://localhost:7115/",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
})

App.vue

 ～
 ～
export default {
  methods: {
    testClick() {
      fetch("/api/GetWeatherForecast")
        .then(function (data) {
          return data.json()
        })
        .then(function (json) {
          for (var i = 0; i < json.length; i++) {
            var date = json[i].date
            var temperatureC = json[i].temperatureC
            var temperatureF = json[i].temperatureF
            var summary = json[i].summary
            console.log(date)
            console.log(temperatureC)
            console.log(temperatureF)
            console.log(summary)
            console.log("-----------------")
          }
        })
    },
  },
}
 ～
 ～