javascriptでAPIを叩きたい

##実現したいこと

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

m.ts10806

2019/09/22 01:32

＞Jason 細かいですがJSONです。

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

回答1件

ベストアンサー

ブラウザの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