fetchでCORSの制限に引っかかってしまう

前提・実現したいこと

Ruby on Rails 7 住所録的なシステムを作っています。
住所->郵便番号、郵便番号->住所の変換をフロントエンドのみでやろうとしています。
そこでJavaScriptで郵便番号APIを叩いているのですが、CORSの制限に引っかかってしまい。データが取得できません。
jQeuryではなく、Vanillaでやろうとしています。（jQueryではうまくいってます）

どんな設定が足りないのでしょうか？

以下で、test.htmlとtest.jsで必要部分を抜き出しました。

発生している問題・エラーメッセージ

test.html:1 Access to fetch at 'https://zipcoda.net/api?address=%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%8D%83%E4%BB%A3%E7%94%B0%E5%8C%BA%E5%8D%83%E4%BB%A3%E7%94%B0' from origin 'null' 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.

test.js:21 GET https://zipcoda.net/api?address=%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%8D%83%E4%BB%A3%E7%94%B0%E5%8C%BA%E5%8D%83%E4%BB%A3%E7%94%B0 net::ERR_FAILED 200
zipcode @ test.js:21
(anonymous) @ test.js:4

test.js:21   Uncaught (in promise) TypeError: Failed to fetch
    at zipcode (test.js:21)
    at HTMLDocument.<anonymous> (test.js:4)
zipcode @ test.js:21
(anonymous) @ test.js:4
Promise.then (async)
zipcode @ test.js:26
(anonymous) @ test.js:4

該当のソースコード

html
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script type="module" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
      window.$ = JQeury();
    </script>
    <script type="text/javascript" src="test.js"></script>
    <link type="text/css" rel="stylesheet" href="test.css"/>
  </head>

  <body>

    <input id="address" value="東京都千代田区千代田">

  </body>   
</html>

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  let val = document.getElementById("address").value;

  zipcode(val);

  jzip(val) // jQueryの$.ajaxではうまくいった
    .done((r) => {
      console.log(r); // {status: 200, length: 1, items: Array(1)} エラーなし
      let zip = r.items[0].zipcode;
      console.log(zip); }) // 1000001 正しく郵便番号を取得できた
    .fail((r) => {
      console.log(r); })


})

const zipcode = (address) => {
  let uri = 'https://zipcoda.net/api?address=';
  uri = uri + encodeURI(address);
  // uri = 'https://holidays-jp.github.io/api/v1/date.json' //①
  fetch(uri, {
    method: "GET",
    mode: "cors"
  })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    });
}

const jzip = (address) => {
  return $.ajax({
    url: 'https://zipcoda.net/api',
    dataType: 'jsonp',
    data: { address: address }
  })
}

試したこと

RoRのconfig/application.rbには次のとおりCORS対策を追加してあります。

ruby
    # Permit cross origin
    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins "*"
        resource "*",
          headers: :any,
          methods: [:get, :post, :options, :head]
      end
    end

gemもインストール済み

# gem list|grep cors
rack-cors (1.1.1)

試しに、test.jsで①のように別のURIにすると問題なくデータを取得できます。

{2021-01-01: '元日', 2021-01-11: '成人の日', 2021-02-11: '建国記念の日', 2021-02-23: '天皇誕生日', 2021-03-20: '春分の日', …}

補足情報（FW/ツールのバージョンなど）

/ # ruby -v
ruby 3.1.0p0 (2021-12-25 revision fb4df44d16) [aarch64-linux-musl]
/ # bundle exec rails -v
Calling DidYouMean::SPELL_CHECKERS.merge!(error_name => spell_checker)' has been deprecated. Please call DidYouMean.correct_error(error_name, spell_checker)' instead.
Rails 7.0.0
/ # cat /proc/version
Linux version 5.13.0-22-generic (buildd@bos02-arm64-014) (gcc (Ubuntu 11.2.0-7ubuntu2) 11.2.0, GNU ld (GNU Binutils for Ubuntu) 2.37) #22-Ubuntu SMP Fri Nov 5 13:22:27 UTC 2021

test.html, test.jsを実行した環境
macOS Monterey 11.0 (915)
Google Chrome 96.0.4664.110（Official Build）（arm64）