[解決済み] Axiosを使用したAccess Control Origin Headerのエラー

質問

React WebアプリでAxiosを使ってAPIコールを行っています。しかし、Chromeでこのエラーが発生します。

XMLHttpRequest cannot load
https://example.restdb.io/rest/mock-data. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8080' is therefore not allowed
access. 

{
    axios
      .get("https://example.restdb.io/rest/mock-data", {
        headers: {
          "x-apikey": "API_KEY",
        },
        responseType: "json",
      })
      .then((response) => {
        this.setState({ tableData: response.data });
      });
}

また、同じ問題についてStack Overflowでいくつかの回答を読みましたが、タイトルが Access-Control-Allow-Origin が、それでも解決する方法がわかりませんでした。Chromeの拡張機能を使ったり、一時的にハックして解決するようなことはしたくありません。上記の問題を解決するための標準的な方法を提案してください。

いくつかの答えを試した後、私はこれで試してみました。

headers: { 
  'x-apikey': '59a7ad19f5a9fa0808f11931',
  'Access-Control-Allow-Origin' : '*',
  'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
},

今度は、次のようなエラーが発生しました。

Request header field Access-Control-Allow-Origin is not
allowed by Access-Control-Allow-Headers in preflight response 

解決方法は？

バックエンドがCORSをサポートしている場合、おそらくこのヘッダをリクエストに追加する必要があります。

headers: {"Access-Control-Allow-Origin": "*"}

[更新】のお知らせ］ アクセス制御-許可-オリジン は応答ヘッダーです。したがって、CORSを有効にするには、サーバーからの応答にこのヘッダーを追加する必要があります。

しかし、ほとんどの場合、より良い解決策は リバースプロキシ そうすれば、CORS を有効にしなくても、サーバーはフロントエンドからバックエンドにリクエストをリダイレクトすることができます。

CORSの仕組みについては、こちらのドキュメントをご覧ください。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS