やりたいこと
一つの実行ファイルでAPIサーバーとなるソフトがあり、このAPIを使用して、入手した情報をWebページに表示したい。(テスト用で簡単にAPI通信して、情報をWebブラウザに表示。)
http://localhost:8888/api
にアクセスをすると、APIサーバーはJSON形式でAPIバージョンを返答します。
解決したいこと
開発用に手軽に既成APIサーバー(ローカル起動)に対してAPI応答を確認し、Webブラウザで表示したい。
CORSエラーを解消するには、どうすればよいでしょうか?
現象
プロジェクトフォルダをカレントにして、以下を実行
npm run dev
> [email protected] dev
> vite
VITE v5.3.5 ready in 224 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
テスト用サーバーが起動されるので、http://localhost:5173/
にアクセス。
エラー表示
ChromeのDevToolsに表示されるエラー
localhost/:1 Access to XMLHttpRequest at 'http://127.0.0.1:8888/api' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
試したこと
1.以下の指定を追加
axios.defaults.headers.get['Content-Type'] = 'application/json'
axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*'
2.http-serverによる起動
npm run build
このコマンドにより、distフォルダにjavascriptにコンパイルされたOutputができるので、distフォルダをカレントにしてhttp-severを起動してアクセスしましたが、結果は同じエラーが発生しました。
環境
ホストOS: Windows 11 Pro
ゲストOS: Ubuntu 22.04 LTS
VM:VMware
npm ver 10.7.0
n ver 9.2.3
IDE: VSCode
プロジェクトの作成方法
以下の方法で作成されたひな形のうち、./src/App.vueを書き換えて試しています。
npm init vue@latest
> npx
> create-vue
Vue.js - The Progressive JavaScript Framework
✔ Project name: … practice-api
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
Scaffolding project in /home/ubuntu/develop/study_vue/practice/practice-api...
Done. Now run:
cd practice-api
npm install
npm run dev
root@ubuntu-virtual-machine:/home/ubuntu/develop/study_vue/practice# cd ./practice-api/
root@ubuntu-virtual-machine:/home/ubuntu/develop/study_vue/practice/practice-api# npm install
ソースコード
App.vue以外のコンポーネントファイルは存在しません。
App.vue
<script setup lang="ts">
import axios from "axios";
import { reactive } from "vue";
const url = "http://127.0.0.1:8888/api";
const data = reactive({
responses:""
});
axios.defaults.headers.get['Content-Type'] = 'application/json'
axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*'
const getData = async () => {
let result = await axios.get(url);
data.responses = result.data;
console.log(data.responses);
}
</script>
<template>
<h1>API 接続テスト</h1>
<section>
<button @click="getData">Request</button>
</section>
</template>
<style scoped>
</style>