javaEEを使用して開発を行っています。
現在WEB APIを使用して郵便番号から住所等の情報を取得したいと考えています。
WEB APIを使用する際にjavaだといい参考例がなかったというのとJavaScriptのほうが楽にかけそうだと考えJavaScriptで処理してBeanに渡そうとしています。(今回のコードでは渡せない)
以下のコードがjsonを取得する「xhtml」ファイル(api.xhtml)なのですがMS Edgeで
Microsoft Edge
SEC7120: 元の http://localhost:8080 が Access-Control-Allow-Origin ヘッダーに見つかりません。
というエラーが出力されてしまいます。
chromeでも同様なエラーが出ました。
Google Chrome
Failed to load http://geoapi.heartrails.com/api/json?method=searchByPostal&postal=673-0877: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://xmlns.jcp.org/jsf/core"> <h:head> <title>Hoge</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </h:head> <body> <h2>Test</h2> <hr/> <h:form id="form"> <h:panelGrid columns="3"> <h:outputLabel value="郵便番号:"/> <input id="zip" type="text" size="45" /> <h:inputHidden value="#{weather.zip}" id="zipHidden" size="45"/> <h:outputLabel value="address:"/> <input id="address" type="text" size="45" /> <h:inputHidden value="#{weather.address}" id="addressHidden" size="45"/> </h:panelGrid> <input id="search" type="button" value="検索" onclick="searchButton();"/> </h:form> <script type="text/javascript"> function searchButton() {// [検索]ボタンクリックで郵便番号検索を実行 var query='http://geoapi.heartrails.com/api/json?method=searchByPostal&postal=673-0877'; $.getJSON(query,function(data){ console.log(data); }); } </script> </body> </html>
--
参考にしたサイトのコピペでは動いたため多分このAPIの呼び方や使い方が間違っているようなのですがよくわからないので教えてください。よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー