JavaScriptからAPIを叩く際のCORSエラーについて

Question

質問内容

現在Ruby on RailsでWebアプリケーションを作成しています。
その際、クライアント側からJavaScriptでAPIを叩きたいのですが

Access to fetch at 'API側のURL' from origin 'クライアント側のURL' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

と言うエラーが発生しました。
クライアント側のスクリプトコードは以下の通りです(一部抜粋)

<script>
           async function postData(url = '', data = {}) {
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                body: JSON.stringify({ data1: "data1", data2: "data2" }) 
               })
               return response.json();
            }
           postData('API側のURL')
           .then(data => {
               console.log(data); 
            });
</script>

調べたこと

エラー内容を調べたところCORSポリシーによるエラーでHTTPヘッダーを変更する必要があることがわかりました。

できていないこと

HTTPヘッダーを変更する具体的な手立て・クライアントかAPI側どちらのヘッダを変更する必要があるのか　と言った点がわからない状態です。
これらについてお教えいただけますと幸いです

実行環境等

クライアント側・・・ Ruby on Rails 5.2
APIサーバ側・・・ Node.js, Express

Answer 1

サーバー側のhttpヘッダーでAccess-Control-Allow-Originを
適正に返しているか確認してください

Comments

[A111]

ご回答いただきありがとうございます
Node.js側のres.headerに新しくAccess-Control-Allow-Originを設定したところ問題なくAPIの実行ができました
アドバイスいただきありがとうございました！