1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. 解決 Javascript 跨網域讀取資料被拒絕的方法(Cross-Origin XMLHttpRequest)

解決 Javascript 跨網域讀取資料被拒絕的方法(Cross-Origin XMLHttpRequest)

2020/10/19

梅問題-解決Javascript 跨網域讀取資料被阻的方法(Cross-Origin XMLHttpRequest)
  由於最近梅干正在研究Woocommerce API,如此一來就可以不受限於Woocommerce的佈景主題框架,就可自行的設計購物車的版型,但在讀取資料的過程中,讓梅干感到有些困擾,那就是當本機的WebServer要讀取遠端資料時,就出現跨網域無法讀取的冏境,變成每次要讀取資料時,就得先將開發好的網頁,上傳到同一網域底下,才能進行測試。

這對於在開發上來說,實在有點困擾,因此梅干找了許多跨網域的解決辦法,最後終於解決了,且虛擬主機也能使用,只需在htaccess中,加入一條指令,立即就可開通,因此有跨網域無法讀取的朋友,現在也一塊來看看囉!


Step1
由於梅干是用本機所架設的Webserver,去讀取遠端的資料,這時在console底下,就會出現跨網域的問題。
梅問題-解決Javascript 跨網域讀取資料被阻的方法(Cross-Origin XMLHttpRequest)
Step2
這時在遠端的主機中,開啟.htaccess文件,若無此文件檔,就自行建立一個,並在此文件中,加入「Header set Access-Control-Allow-Origin '*'」。
梅問題-解決Javascript 跨網域讀取資料被阻的方法(Cross-Origin XMLHttpRequest)
Step3
這時再重新整理網頁,鏘~鏘~感動的時刻到了,終於順利的讀取遠端主機中的資料了。
梅問題-解決Javascript 跨網域讀取資料被阻的方法(Cross-Origin XMLHttpRequest)