在Vue的開發專案裏，
有時需要透過像Ajax來取得遠端資料，
而在Vue.js裏使用的是 axios 的方式來跨域取讀遠端PHP的資料，
但問題來了，
在本機使用 localhost 的方式會出現下面跨網域存取的警告。
解決步驟如下:
1. Vue程式中加入 axios 設定值
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<span style="background-color:#eeeeee;"> axios.get( url, { <span style="color:#A52A2A;">headers: {'X-Requested-With': 'XMLHttpRequest'},</span> // 若有送出header需求, PHP要設定相對的header參數 <span style="color:#A52A2A;"> withCredentials: true,</span> // default: false 若有使用cookie、session則要開啟, 否則瀏覽器不會將response返回 responseType: 'json', timeout: 60*1000, params:{ 'act':'getData' } } ).then(response => { // success callback }, response => { // error callback });</span> |
2. PHP程式中加入 header 設定值
|
1 2 3 4 5 6 7 8 9 |
<span style="background-color:#eeeeee;"><?php</span> <span style="background-color:#eeeeee;">header("Content-Type:text/html; charset=utf-8");</span> <span style="background-color:#eeeeee;">header('Content-type: application/json');</span> <span style="background-color:#eeeeee;">// axios 解決跨域問題</span> <span style="background-color:#eeeeee;"><span style="color:#A52A2A;">header("Access-Control-Allow-Credentials: true");</span> // 相對應 axios 的設定，若有使用cookie、session則要開啟, 否則瀏覽器不會將response返回 </span> <span style="background-color:#eeeeee;"><span style="color:#A52A2A;">header("Access-Control-Allow-Origin: http://localhost:8080"); </span> // 指定可允許訪問的URL </span> <span style="background-color:#eeeeee;"><span style="color:#A52A2A;">header("Access-Control-Allow-Methods: POST, GET, OPTIONS");</span> // 允許客戶端可使用的方式 </span> <span style="background-color:#eeeeee;"><span style="color:#A52A2A;">header("Access-Control-Allow-Headers: X-PINGOTHER, Content-Type, X-Requested-With");</span> // 服務器允許請求中攜帶字段 </span> <span style="background-color:#eeeeee;">?></span> |
以上兩個步驟設定完後，
就可以順利的跨網域取得資料了。
作者： winnie