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

前提

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.

該当のソースコード

YahooGeo.tsx

1import { useEffect } from 'react'; 2import axios from 'axios'; 3 4const ROOT_URL = 'https://map.yahooapis.jp/geoapi/V1/reverseGeoCoder?'; 5 6export default function YahooGeo() { 7 const apiKey = process.env.REACT_APP_YAHOO_API_KEY; 8 const coordinates = { lat: '35.658581', lng: '139.745433' }; 9 const ACCESS_URL = `${ROOT_URL}lat=${coordinates.lat}&lon=${coordinates.lng}&output=json&appid=${apiKey}`; 10 11 useEffect(() => { 12 const access = async () => { 13 try { 14 const result = await axios.get(ACCESS_URL); 15 console.log(result); 16 } catch (error) { 17 console.error('Error fetching data:', error); 18 } 19 }; 20 access(); 21 }, []); 22 23 return null; 24}

setupProxy.js

1// eslint-disable-next-line @typescript-eslint/no-var-requires 2const { createProxyMiddleware } = require('http-proxy-middleware'); 3 4module.exports = function (app) { 5 const headers = { 6 'Content-Type': 'application/json', 7 Authorization: process.env.REACT_APP_YAHOO_API_KEY, 8 }; 9 app.use( 10 '/api', 11 createProxyMiddleware({ 12 target: 'http://localhost:3000', 13 changeOrigin: true, 14 secure: false, 15 headers, 16 }) 17 ); 18};

試したこと

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