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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Curl(プログラミング言語)

Curl(プログラミング言語)は、Webコンテンツ向けのプログラミング言語。HTMLのようなテキスト記述やレイアウトデザイン、JavaScript のようなオブジェクト指向プログラム言語、Java のような重量機能など複数の言語の特徴を一つのフレームワークに統合しています。

JavaScript

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

8793閲覧

javascriptでAPIを叩きたい

chiba_kun

総合スコア16

Curl(プログラミング言語)

Curl(プログラミング言語)は、Webコンテンツ向けのプログラミング言語。HTMLのようなテキスト記述やレイアウトデザイン、JavaScript のようなオブジェクト指向プログラム言語、Java のような重量機能など複数の言語の特徴を一つのフレームワークに統合しています。

JavaScript

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

2クリップ

投稿2019/09/22 01:09

##実現したいこと

HTMLファイル内に書かれたscriptから、APIを叩いて、API返ってきたレスポンス結果をconsole.logで表示したいです。

叩きたいAPIはface++というAPIです。

##経緯

APIを使うと色々便利なことが出来ると知ったので、APIの使い方の勉強をつい最近始めました。

最初はPowerShellとcurlを使い、APIを叩いていたのですが、それ以外にもAPIを使う方法がないのかと考え、調べてみました。

すると、Javascriptでは、xmlhttprequestや、fetchと呼ばれるものを使えば、APIを叩けるということを知りました。

fecthの方がモダンな技術とのことだったので、fecthを使うことにしました。

「fecth API」と調べると、fetchを用いAPIを叩く解説をしているキータの記事がいくつか出てきました。

下記の参考にしている記事のコードの抜粋です。

参考元記事

const API_KEY = '${API_KEY}'; const CITY = 'Tokyo'; const URL = `http://api.openweathermap.org/data/2.5/forecast?q=${CITY},jp&units=metric&APPID=${API_KEY}`; fetch(URL) .then(res => { if(res.ok){ return res.json(); } else { throw new Error(); } }) .then(myJson => { console.log(JSON.stringify(myJson)); }) .catch(err => { console.log(err); })

fetch(リクエストURL)とすれば、APIを叩ける、意外とすんなりできそうだなと思ったのですが、疑問が発生しました。

リクエストパラメータの渡し方がよく分からないのです。

私が使おうとしている、face++は、リクエストURLの他に、3種類渡さなければいけないパラメータがあります。

api_keyとapi_secretと、image_urlというパラメータです。

参考元の記事のコードでは、渡したいパラメータを変数に代入し、リクエストURLの中に含ませているのがわかります

const URL = `http://api.openweathermap.org/data/2.5/forecast?q=${CITY},jp&units=metric&APPID=${API_KEY}`;

CITYとAPI_KEYの部分ですね。

私が使おうとしているface++のリクエストURLは

https://api-us.faceplusplus.com/facepp/v3/detect

なので

https://api-us.faceplusplus.com/facepp/v3/detect?api_key=<api_key>&api_secret=<api_Secret>&image_url=https://studio728.jp/wp-content/uploads/2016/02/id2.jpg

としましたが、リクエストURLの箇所がおかしいらしく、エラーが発生してしまいました。

※api_keyやapi_Secretは勿論意図的に隠しています。

エラー文は二つです。

一つはエラーコード400で、Face++の公式ドキュメントを参照すると、渡そうとしていた画像ファイルに問題があるとのこと。

しかし、curlでAPIを叩いてた時、ネットにある適当な画像のURLを渡してもJasonが毎回ちゃんと返ってきていました。

どうしてfetchでapiを叩くと、画像に問題があると出てくるのかよく分かりません。

イメージ説明

2つ目のエラーは

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.

というエラーでした。

##試してみたこと

face++の公式ドキュメントにサンプルリクエストがないかと思い、調べてみましたが、ありませんでした(curlでのサンプルリクエストしか書いてなかった)。

MDNのドキュメントを読み、fetchについて勉強をしていますが、まだ解決には至っていません。

MDN

##質問

APIを使おうとした上で、複数疑問が湧いたので、番号をつけ箇条書きをします。

①CORSについて

CORSとは同一オリジンポリシーに纏わる話ですよね。HTTP通信でface++に顔写真を渡すと、その結果がJasonでクライアントに返ってきます。この際にどうしてCORSの話になるかが分かりません。登場人物はface++とクライアントの二つだけです。それともリクエストURLの送り先とJasonを返すサーバーは違うのでしょうか?

②APIの利用方法

face++の公式ドキュメントには、curlを使った利用方法のサンプルしか載っていませんでした。

そこで疑問に思ったのですが、APIというのはcurlでしか叩けないだとか、javascriptからのhtpp通信は許さないとか、場合によってはそういう制限があるのでしょうか?

③私が書いたリクエストURLに間違いなどがあれば教えて欲しいです。
またエラーコード400が出る理由も分かれば、教えて欲しいです。

https://api-us.faceplusplus.com/facepp/v3/detect?api_key=<api_key>&api_secret=<api_Secret>&image_url=https://studio728.jp/wp-content/uploads/2016/02/id2.jpg

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

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

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

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

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

m.ts10806

2019/09/22 01:32

>Jason 細かいですがJSONです。
guest

回答1

0

ベストアンサー

ブラウザのJavaScriptからのAPI使用にはCORSの理解が重要。

JavaScriptの実行元 http://example.com
API https://api-us.faceplusplus.com/
別オリジンなのでAPI側が許可してない限り「ブラウザのJavaScript」からは使用できない。
許可してない理由はapi_keyやsecretが外から見えるから。(なぜかこれを自覚してない人が多すぎる)

curlやサーバーサイドの言語など「ブラウザのJavaScript」以外なら関係ない。

htmlからJavaScriptに進んで来てJSだけでなんでもできると思い込んだ初心者もここでできないことがあると気付いてサーバーサイドにも手を出すことになる。
最近はこのパターンが多いはず。

投稿2019/09/22 01:32

kawax

総合スコア10377

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

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

chiba_kun

2019/09/25 08:16

解説ありがとうございます! CORSについての理解が重要なのですね。もっと詳しく調べてみることにします。回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問