質問編集履歴
1
頂いたコメントをもとに追記させていただきました。
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
|
+

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