最近在開發一個網頁時,遇到了一個問題,需要使用Vue來調用后臺的PHP文件,獲取數據并進行渲染,但是在使用Vue的get方法時,卻無法成功獲取到數據。
<script> export default { data() { return { dataList: [] } }, created() { this.getDataList(); }, methods: { getDataList: function() { this.$http.get('/getData.php').then((response) =>{ this.dataList = response.data; }, (response) =>{ console.log(response); }); } } } </script>
在上面的代碼中,getData.php是后臺PHP文件名,該文件會返回一個JSON格式的數據,返回的數據在Vue中綁定的data中的dataList數組中。
在控制臺中可以看到如下的錯誤信息:
OPTIONS http://localhost/getData.php 405 (Method Not Allowed) Uncaught (in promise) Error: Request failed with status code 405
根據上面的錯誤提示來分析,405錯誤主要是由于方法不被允許導致的,這是因為該請求為跨域請求導致服務器將該請求視為非安全請求而拒絕請求。
要解決這個問題,首先需要在PHP文件中添加一些代碼,將跨域請求來的域名添加到許可名單中。
header("Access-Control-Allow-Origin: http://localhost:8080"); header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE"); header("Access-Control-Allow-Headers: content-type"); header("Access-Control-Allow-Credentials: true");
上面的代碼中,Access-Control-Allow-Origin部分是指明允許哪些域名訪問該資源,本例中是http://localhost:8080,Access-Control-Allow-Methods指明允許哪些HTTP方法,Access-Control-Allow-Headers是指明允許哪些類型的數據傳輸。
在PHP代碼中添加了上面的代碼之后,再運行Vue的get請求,結果發現還是無法成功獲取到數據。
為了解決這個問題,需要在Vue的代碼中添加Header,來將PHP中添加的Access-Control-Allow-Origin通過Vue的請求發送到后臺。
<script> export default { data() { return { dataList: [] } }, created() { this.getDataList(); }, methods: { getDataList: function() { this.$http.get('/getData.php', {headers: {'Access-Control-Allow-Origin': 'http://localhost:8080'}}).then((response) =>{ this.dataList = response.data; }, (response) =>{ console.log(response); }); } } } </script>
在上面的代碼中,通過在get方法中添加headers參數,來將這個Header傳遞給后臺PHP文件中,這樣Vue就可以成功獲取到后臺的數據了。
總結一下,通過在后臺PHP文件中添加許可域名的代碼以及在Vue的請求中添加Header的方式,可以解決Vue通過PHP的get方法獲取數據的問題。