1

やりたいこと

一つの実行ファイルで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>

1 件の回答 1

2

CORSエラーを解消するには、どうすればよいでしょうか?

Web API 側で CORS 対応するのが筋だと思いますが、それができないということであれば開発用のプロキシを使ってはいかがですか。

質問者さんが開発に使っているフレームワークに開発用のプロキシが使える設定がないか探してみてはいかがですか?

例えば Visual Studio を使って作成する React アプリのプロジェクトでは、クライアント側に VITE を、Web API に IIS Express をサーバーとして使いますが、クロスドメインになるので VITE のプロキシを使って Web API への要求はプロキシを通すことで対応しています。

具体的には、vite.config.js というファイルで以下の設定がされており、Web API の url の https://localhost:7133/weatherforecast への要求はプロキシを通る設定がされています。

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [plugin()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        proxy: {
            '^/weatherforecast': {
                target: 'https://localhost:7133/',
                secure: false
            }
        },
        port: 5173,
        https: {
            key: fs.readFileSync(keyFilePath),
            cert: fs.readFileSync(certFilePath),
        }
    }
})
1
  • プロキシ設定でうまくいきました。npm config ls -lにてproxy設定gがないことを確認し、npm config set proxy 127.0.0.1:8888で設定。実行したところ、エラーがなく正しい応答を得られました。 Commented 8月1日 1:29

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

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。