Reactでこんなエラーが出ました！

Question

EDAMAMを使ってAPIを取得してReactに組み込んだらこんなエラーが出てしまいました。
下記APIのurl。
https://developer.edamam.com/edamam-docs-recipe-api

##出現したエラー
GET https://api.edamam.com/search?q=chicken&app_id=b5d7a030&app_key=0b804e43df69b380805f07011d12eb4c 401 (Unauthorized)

localhost/:1 Access to fetch at 'https://api.edamam.com/search?q=chicken&app_id=b5d7a030&app_key=0b804e43df69b380805f07011d12eb4c' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
App.js:16 Uncaught (in promise) TypeError: Failed to fetch

import React, { useEffect, useState } from "react";
import "./App.css";

const App = () => {
  const APP_ID = "b5d7a030";
  const APP_KEY = "0b804e43df69b380805f07011d12eb4c";
  useEffect(() => {
    getRecipes();
  }, []);
  const getRecipes = async () => {
    const response = await fetch(
      `https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}`
    );
    const data = await response.json();
    console.log(data);
  };
  return (
    <div className="App">
      <form className="search-form">
        <input className="search-bar" type="text" />
        <button className="search-button" type="submit">
          Search
        </button>
      </form>
    </div>
  );
};

export default App;

Answer 1

EDAMAMを使ってAPIを取得してReactに組み込んだらこんなエラーが出てしまいました。

そうですか。で、どうしたいのでしょうか？

---

https://developer.edamam.com/faq

Do you support direct requests from the browser (AJAX, JSONP, CORS)?

• For the Recipe Analysis API and Nutrition Data API the answer is no and we currently don't plan to. There are two reasons behind this:

First, to access one of these APIs the request needs to include valid credentials (for example app_id and app_key). This would make it very easy for somebody to steal them.

The second reason is, that direct access means direct charges from Edamam caused by the use of your site.

Instead we expect that our customers develop server-side solutions that save the responses.

For the Diet Recommendations API and Recipe Search API we do support JSONP through the callback parameter. However, we are discouraging this, because of the same security issue.