結論

services.ymlを次のように編集する

# Configure Cross-Site HTTP requests (CORS).
# Read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
# for more information about the topic in general.
# Note: By default the configuration is disabled.
cors.config:
    # enabled: false # --- 修正前
    enabled: true # --- 修正後 
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: []
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: []
    # Configure requests allowed from specific origins. Do not include trailing
    # slashes with URLs.
    allowedOrigins: ['*']
    # Configure requests allowed from origins, matching against regex patterns.
    allowedOriginsPatterns: []
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: false
    # Sets the Access-Control-Max-Age header.
    maxAge: false
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: false

環境

Drupal10.2.3

概要

Reactからaxiosを使って、Drupalで作成したViewsRESTからデータを取ろうとしたところ以下のエラーが出ました。

blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

ざっくりいうと、CORSポリシーに反してるよっていう趣旨のメッセージです。

CORSとは

異なるサーバー間でのリクエストのやり取りをできるようにするための仕組みです。

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

間違ってたらごめんなさい。

やったこと

DrupalではデフォルトでCORSが許可されていないのでこれを許可するように設定しました。
その設定が冒頭に紹介した修正です。

allowHeaders以降の設定も要件に応じて変えてください。私は特に変更しませんでした。
コメントを翻訳すると次のようです。

x-allowed-header'のように、許可するヘッダを指定します。
許可するリクエストメソッドを指定します.
特定のオリジンからのリクエストを許可するように設定する。
URLの末尾にスラッシュを含めないでください。
正規表現パターンにマッチするオリジンから許可されるリクエストを設定します。
Access-Control-Expose-Headersヘッダーを設定します。
Access-Control-Max-Ageヘッダーを設定します。
Access-Control-Allow-Credentialsヘッダーを設定します。

なおservices.ymlは最初から存在するファイルではないので、
初めて触る場合は前もって以下を実施してください。

cp sites/default/default.services.yml sites/default/services.yml

私の場合はsites/defaultに書き込み権限がなかったのでchmodしましたが、
その辺は環境によっても異なるので適宜実施してください。

参考

https://www.drupal.org/project/simple_instagram_feed/issues/3201098