質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2590閲覧

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

NCC1701

総合スコア1680

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/01/07 05:14

前提・実現したいこと

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)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

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

投稿2022/01/07 05:25

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NCC1701

2022/01/11 05:30

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

2022/01/11 05:34 編集

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

0

ベストアンサー

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});

投稿2022/01/07 06:02

編集2022/01/07 06:04
yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NCC1701

2022/01/11 05:30

ありがとうございました。 よもやfetchでは置き換えられないとは思い至りませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問