teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

頂いたコメントをもとに追記させていただきました。

2018/10/30 03:32

投稿

aoki_monpro
aoki_monpro

スコア45

title CHANGED
File without changes
body CHANGED
@@ -64,4 +64,76 @@
64
64
  const xml = response.data;
65
65
  const areas = xml.getElementsByTagName('hotel');
66
66
  console.log(areas)
67
- ```
67
+ ```
68
+
69
+ 頂いたコメントをもとに追記いたします。
70
+
71
+ こちらのブログを参考に設定していまして、クロスドメイン制約は下記で対応していると思っているのですが、不足あるかもしれません。
72
+
73
+ 参考ブログ [Vue.js と Ajax でお天気アプリっぽいのを作ってみた](https://webman-japan.com/playground/vue-and-ajax/)
74
+
75
+ ```
76
+ // ajax.php
77
+ <?php
78
+ if(isset($_GET["url"]) && preg_match("/^https?:/",$_GET["url"])){
79
+ $data = file_get_contents($_GET["url"]);
80
+ $data = mb_convert_encoding($data, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
81
+ echo $data;
82
+ }else{
83
+ echo "error";
84
+ }
85
+
86
+ ```
87
+
88
+ ```
89
+ // index.html
90
+ <!DOCTYPE html>
91
+ <html lang="ja">
92
+
93
+ <head>
94
+ <meta charset="utf-8">
95
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
96
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
97
+ crossorigin="anonymous">
98
+ <link rel="stylesheet" href="style.css">
99
+
100
+ <title>APIテスト</title>
101
+ </head>
102
+
103
+ <body>
104
+ <div id="app">
105
+
106
+ <div class="app-header">
107
+ <h1>施設情報</h1>
108
+
109
+ <div>
110
+ エリアを選択:
111
+ <select class="form-control" v-model="largearea" v-on:change="get_largearea(largearea)">
112
+ <option v-for="item in prefs" v-bind:value="item.cd">{{ item.large_name }}</option>
113
+ </select>
114
+ </div>
115
+ </div>
116
+
117
+
118
+ </div>
119
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
120
+ crossorigin="anonymous"></script>
121
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
122
+ crossorigin="anonymous"></script>
123
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
124
+ crossorigin="anonymous"></script>
125
+ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
126
+ <script src="https://unpkg.com/vue"></script>
127
+ <script src=".config.js"></script>
128
+ <script src="app.js"></script>
129
+ </body>
130
+
131
+ </html>
132
+ ```
133
+
134
+ エラー箇所
135
+
136
+ ![イメージ説明](0d052794bf84ecb291be25c2b774483d.jpeg)
137
+
138
+ hotelのHを大文字にしても変わらずでした。。
139
+ const areas = xml.getElementsByTagName('Hotel');