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

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

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

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

JavaScript

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

解決済

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

NCC1701
NCC1701

総合スコア1673

Ruby on Rails

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

JavaScript

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

2回答

0評価

1クリップ

491閲覧

投稿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

<!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)

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails

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

JavaScript

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