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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

API

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

Q&A

解決済

1回答

4179閲覧

axiosを使って外部APIをgetをした結果が自分自身になってしまう

nieve

総合スコア33

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

API

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

0グッド

0クリップ

投稿2018/04/01 10:36

laravelにのっかっているVue.jsのコンポーネントの中に、spotifyのAPIを記載してアルバムデータの取得を実行してみました。
すると、取得しに行っている側の自分で書いているアプリが戻ってきているようです。
axiosを初めて使ったので、何かを勘違いしているのかもしれません。
どうやったらアルバムデータが戻ってくるのでしょう??

【追加情報】
クライアントID/secretはspotifyにアプリを登録して取得したもの、
パラメータについては
https://beta.developer.spotify.com/console/get-several-albums/
のサンプルを持ってきています。

ターミナルでcurlで試してみたり、↑URLのspotify consoleにこちらで作成したトークン入れて試してみる分には、欲しい結果が戻ってきているのですが、、、

【↓APIを取得するために記入したもの。】

javascript

1 const cdata = { 2 client_id: client_idが入る, 3 client_secret: client_secretが入る, 4 }; 5 6 export default { 7 mounted: function () { 8 this.getArts() 9 }, 10 methods: { 11 getArts(){ 12 var AuthStr = 'Bearer '+window.btoa(cdata.client_id+':'+cdata.client_secret); 13 14 axios.get({ 15 baseURL: 'https://api.spotify.com/v1/albums', 16 params : { 17 'ids': '382ObEPsp2rxGrnsizN5TX', 18 'market': 'ES' 19 }, 20 headers: { 21 Authorization: AuthStr, 22 }, 23 timeout: 1000, 24 }) 25 .then(function(r){ 26 console.log(r); 27 }) 28 .catch(function(error) { 29 console.log(error); 30 }); 31 } 32 } 33 }

【↓取得結果】
イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

axiosのgetは第一引数に取得したいURLを、第二引数にオプションを入れるようです。

axios.get('albums', { baseURL: 'https://api.spotify.com/v1/', params : { 'ids': '382ObEPsp2rxGrnsizN5TX', 'market': 'ES' }, headers: { Authorization: AuthStr, }, timeout: 1000, }).

でどうでしょうか

投稿2018/04/01 14:42

sakapun

総合スコア888

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

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

nieve

2018/04/01 18:38 編集

ありがとうございます! 早速試してみました。 反応が変わって、エラーが出るようになりました。 Failed to load https://api.spotify.com/v1/albums?ids=382ObEPsp2rxGrnsizN5TX&market=ES: Request header field X-CSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response. 03:20:04.677 下のように入れても同じエラーで。。。TT (commonの中に入れても入れなくても同じでした。。) ```javascript console.log(document.head.querySelector('meta[name="csrf-token"]').content) <!--中身アリ--> axios.get('albums', { baseURL: 'https://api.spotify.com/v1/', params : { 'ids': '382ObEPsp2rxGrnsizN5TX', 'market': 'ES' }, headers: { Authorization: AuthStr, common: { 'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content, 'X-Requested-With': 'XMLHttpRequest', 'Access-Control-Allow-Headers': 'X-CSRF-Token', } }, timeout: 1000, }) ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問