【React】 No 'Access-Control-Allow-Origin' header is present on the requested resourceへの対処法

Question

前提

ReactでYahooの地黄コーディングAPIにアクセスしようとすると、表題のエラーが発生します。

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

以下の通りです。なおAPIキーはKEYと書き換えています。

Access to XMLHttpRequest at 'https://map.yahooapis.jp/geoapi/V1/reverseGeoCoder?lat=35.658581&lon=139.745433&output=json&appid=KEY' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当のソースコード

import { useEffect } from 'react';
import axios from 'axios';

const ROOT_URL = 'https://map.yahooapis.jp/geoapi/V1/reverseGeoCoder?';

export default function YahooGeo() {
  const apiKey = process.env.REACT_APP_YAHOO_API_KEY;
  const coordinates = { lat: '35.658581', lng: '139.745433' };
  const ACCESS_URL = `${ROOT_URL}lat=${coordinates.lat}&lon=${coordinates.lng}&output=json&appid=${apiKey}`;

  useEffect(() => {
    const access = async () => {
      try {
        const result = await axios.get(ACCESS_URL);
        console.log(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    access();
  }, []);

  return null;
}

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  const headers = {
    'Content-Type': 'application/json',
    Authorization: process.env.REACT_APP_YAHOO_API_KEY,
  };
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3000',
      changeOrigin: true,
      secure: false,
      headers,
    })
  );
};

試したこと

・package.jsonに"proxy": "http://localhost:4000"を追記
・setupProxyファイルの作成

Answer 1

当該のAPIにはJSONP形式があります。

JSONPをハンドリングできるなら、プロキシ処理自体が不要となります。