楽天APIから、商品情報を取得使用とすると、 CORS policy エラーが発生する。

Question

Axiosを使用して、楽天API（商品）より、取得しようとすると、以下のCORS エラーが発生します。

Access to XMLHttpRequest at 'https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?applicationId=XXXXXXXXXX&shopCode=robul' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

Axiosの設定が足りていないのか考えておりますが、
http://localhost
からアクセスはできないのでしょうか？

追記：

以下のJSOPの入力パラメータ設定も可能ですが、使用法方法がわかっていません。

Comments

[maisumakun]

楽天側で「使用可能なドメイン」などを設定する箇所はありませんか？

（jsonpも可能なので、そちらを使う手もあります）

[hrsi_teratail]

楽天側の設定を確認すると、

アプリURL
コールバック許可ドメイン
ポリシーURL

という項目があります。

アプリURL：https://webservice.rakuten.co.jp
コールバック許可ドメイン:localhost
ポリシーURL:未入力

コールバック許可ドメインの設定が誤りでしょうか？

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

[hrsi_teratail]

Axiosから送信の問題なので、実際には未解決です。

[kei344]

では状況を質問文に追記されてはいかがでしょう。少なくとも私には現状の質問文では何が問題になっているかがわかりません。

[hrsi_teratail]

追記していますよ。

[kei344]

JSONPの何がわからないのでしょうか。

Answer 1

CORS を許可するにはサーバ側のヘッダに追記する必要があるため、「Axiosの設定」では回避できません。
ご自身で管理されているサーバを経由するなどする必要があります。

【オリジン間リソース共有 (CORS) - HTTP | MDN】
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

【なんとなく CORS がわかる...はもう終わりにする。 - Qiita】
https://qiita.com/att55/items/2154a8aad8bf1409db2b

Comments

[hrsi_teratail]

こちらからのサーバー経由で取得すると、取得できました。
ありがとうございます。