Vue.js axios XML取得しようとすると HTMLCollectionが空 TypeError: 'caller', 'callee', and 'arguments' properties

先日下記投稿をさせていただき、とあるAPI URLからXML取得できるようになったのですが、

別のAPI URL を取得しようとしたところ、HTMLCollectionが空で取得され、

デバッガでargumentsを見ると、

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)

と表示されています。

いくつかググってみて、 'use strict' をつけたり外したりしてみたものの変わらず・・

データ取得する方法がないか、ご教授いただけませんでしょうか。。

//対象XML 一部
//

<Results xmlns="jws">
<NumberOfResults>10</NumberOfResults>
<DisplayPerPage>1</DisplayPerPage>
<DisplayFrom>1</DisplayFrom>
<APIVersion>1.3</APIVersion>
<Hotel>
<HotelID>300624</HotelID>
<HotelName>天空の城三宜亭本館</HotelName>
<PostCode>395-0034</PostCode>
<HotelAddress>長野県飯田市追手町２－６４１－１０</HotelAddress>
<Area>
<Region>甲信越</Region>
<Prefecture>長野県</Prefecture>
<LargeArea>伊那・駒ヶ根・飯田・昼神</LargeArea>
<SmallArea>飯田・天竜峡</SmallArea>
</Area>
<HotelType>旅館</HotelType>
<HotelDetailURL>

// app.js (Vue.js)
const vm = new Vue({
  el: '#app',
  data: {
    prefs: [],
    largearea: '',

  },
  methods: {
    get_location: function () {
      const request = 'ajax.php?url=http://jws.jalan.net/APILite/HotelSearch/V1/?key=API_KEY&pref=160000&l_area=162600&s_area=162612&h_type=1&start=1&count=1'
      axios.get(request, {
        timeout: 30000,
        responseType: 'document'
      })
        .then(function (response) {
          const xml = response.data;
          const areas = xml.getElementsByTagName('hotel');
          console.log(areas)

頂いたコメントをもとに追記いたします。

こちらのブログを参考に設定していまして、クロスドメイン制約は下記で対応していると思っているのですが、不足あるかもしれません。

参考ブログ Vue.js と Ajax でお天気アプリっぽいのを作ってみた

// ajax.php
<?php
  if(isset($_GET["url"]) && preg_match("/^https?:/",$_GET["url"])){
    $data = file_get_contents($_GET["url"]);
    $data = mb_convert_encoding($data, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
    echo $data;
  }else{
    echo "error";
  }

//　index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">

  <title>APIテスト</title>
</head>

<body>
  <div id="app">

    <div class="app-header">
      <h1>施設情報</h1>

      <div>
        エリアを選択：
        <select class="form-control" v-model="largearea" v-on:change="get_largearea(largearea)">
          <option v-for="item in prefs" v-bind:value="item.cd">{{ item.large_name }}</option>
        </select>
      </div>
    </div>


  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue"></script>
  <script src=".config.js"></script>
  <script src="app.js"></script>
</body>

</html>

エラー箇所

hotelのHを大文字にしても変わらずでした。。
const areas = xml.getElementsByTagName('Hotel');

退会済みユーザー

2018/10/30 02:52

クロスドメイン制約は回避できているんでしょうか？

退会済みユーザー

2018/10/30 03:03

できればパッと試せるように、実行できる最小のコードを示していただけると回答しやすいです。

aoki_monpro

2018/10/30 03:35

ありがとうございます、追記させていただきました。

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

回答1件

ベストアンサー

エラーについては、エラーが出ている箇所を特定してください。
別ファイルの可能性もあります。

また、データの取得自体は問題ありません。
Hotelとすべきところを、hotelとしているので取得できていません。

投稿2018/10/30 03:12

退会済みユーザー

総合スコア0

aoki_monpro

2018/10/30 03:35

Hotelに変更したものの変わらずでした・・

退会済みユーザー

2018/10/30 03:59

ん～なんでしょう。こっちではうまくいっているので、 const areas = xml.getElementsByTagName('hotel'); の問題ではなく、xmlの取得がそもそも上手くいっていない可能性も…。引数responseを確認してみてはどうでしょうか。

aoki_monpro

2018/10/30 04:10

ありがとうございます。.then(function(response){ const xml = response.data; console.log(xml) で確認してみると400 Bad Requestでうまく取得できていないようでした。 Warning file_get_contents(http://jws.jalan.net/APILite/HotelSearch/V1/?key=API_KEY): faild to open stream: HTTP request failed: HTTP/1.1 400 Bad Request in "ajax.php" on line 3　　一方URLを直接打つと問題なくXML表示さます。ajax.phpの記載がなにかまずい？のでしょうか。。

退会済みユーザー

2018/10/30 04:23

ajax.phpでもデバッグできると思うので、一行一行デバッガで確認して、想定通りの値が得られているかor想定通りの挙動をしているかを確認してみてください。

aoki_monpro

2018/10/31 07:14

ググりまくって、こちらの記事で取得できました、勉強になりました。アドバイスありがとうございます。 https://qiita.com/unotovive/items/4ec890765de205c30228

退会済みユーザー

2018/10/31 07:19

解決したみたいでよかったです('0'* ただ少し気になるのが、ほかのコードなら動いているにもかかわらず、今回の場合だけクロスドメイン問題が出てくるのは結構謎です。

aoki_monpro

2018/10/31 07:24

そうなんですよね・・違いとしたらURLクエリありなしかな？と思いつつまだ根本原因わからずです。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.31%

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

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

質問する

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

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

Vue.js axios XML取得しようとすると HTMLCollectionが空 TypeError: 'caller', 'callee', and 'arguments' properties

関連した質問