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
1<!DOCTYPE html>
2<html>
3  <head>
4    <title></title>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
7    <script type="module" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
8      window.$ = JQeury();
9    </script>
10    <script type="text/javascript" src="test.js"></script>
11    <link type="text/css" rel="stylesheet" href="test.css"/>
12  </head>
13
14  <body>
15
16    <input id="address" value="東京都千代田区千代田">
17
18  </body>   
19</html>

JavaScript
1
2document.addEventListener('DOMContentLoaded', () => {
3  let val = document.getElementById("address").value;
4
5  zipcode(val);
6
7  jzip(val) // jQueryの$.ajaxではうまくいった
8    .done((r) => {
9      console.log(r); // {status: 200, length: 1, items: Array(1)} エラーなし
10      let zip = r.items[0].zipcode;
11      console.log(zip); }) // 1000001 正しく郵便番号を取得できた
12    .fail((r) => {
13      console.log(r); })
14
15
16})
17
18const zipcode = (address) => {
19  let uri = 'https://zipcoda.net/api?address=';
20  uri = uri + encodeURI(address);
21  // uri = 'https://holidays-jp.github.io/api/v1/date.json' //①
22  fetch(uri, {
23    method: "GET",
24    mode: "cors"
25  })
26    .then(response => response.json())
27    .then(data => {
28      console.log(data);
29    });
30}
31
32const jzip = (address) => {
33  return $.ajax({
34    url: 'https://zipcoda.net/api',
35    dataType: 'jsonp',
36    data: { address: address }
37  })
38}
39
40

試したこと

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

ruby
1    # Permit cross origin
2    config.middleware.insert_before 0, Rack::Cors do
3      allow do
4        origins "*"
5        resource "*",
6          headers: :any,
7          methods: [:get, :post, :options, :head]
8      end
9    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）

行動規範の内容に同意します

回答2件

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

設定ではなく、確認が足りないようです。

このAPIは、引数としてcallbackを取るように、JSONPには対応していますが、CORSには非対応なようです。

投稿2022/01/07 05:25

maisumakun

総合スコア146018

NCC1701

2022/01/11 05:30

curl を使って確認した時はcallbackなしでもデータを取得できたので、CORSのエラーの問題だと思ってました。（エラーもそのように出ていたので）

maisumakun

2022/01/11 05:34 編集

> curl を使って確認した時はcallbackなしでもデータを取得できたので、CORSのエラーの問題だと思ってました。そのとおりです。サーバサイドでCORS非対応であれば、ブラウザ内だけで手を出せることは（今回はJSONP対応だったのでそっちを使う手がありましたが、通常は）ありません。

行動規範の内容に同意します

ベストアンサー

javascript
1const cb=json=>{
2  console.log(JSON.stringify(json));
3}
4const url="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&callback=cb";
5window.addEventListener('DOMContentLoaded', ()=>{
6  document.head.appendChild(Object.assign(document.createElement('script'),{src:url}));
7});