HTML/Javascript+PHP @visual studio code 如何 debug及開發流程.

php javascript html visual studio code ajax

calvintai63 2020-12-04 15:43:38 ‧ 2759 瀏覽

請問一下先進:

我是新手,使用 MAMP+visual studio code 在 windows10 練習 Javascript + PHP AJAX訊息交換.

其中 php檔及html檔都放在同一個目錄下(C:/MAMP/htdocs), 若直接使用 chrome 進入 localhost:80\xxx.html,就可以正確交換資料(有收到php回傳資料),若在vs code 透過 open in default browser 進入chrome (file:///C:/MAMP/htdocs/page%203.html),則無法正確交換資料,會有跨域的問題.
Q1: 請問有辦法在VS code或是chrome 做任何設定,解決跨域的問題?或是html/JS程式中的file path 該如何寫,可以避免此問題?還是只能透過類似localhost方式開檔來避免?

Q2: vs code 有安裝PHP Debug extension,但我還不太清楚到底該在chrome,還是在vs code,還是在兩者同時進行 single step/run/stop debug?有推薦的design/debug flow嗎?

以下是透過chrome開發人員選項console看到的跨域錯誤訊息:
Access to XMLHttpRequest at 'file:///C:/MAMP/htdocs/test3.php' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

php程式如下:

<?php
    echo "test 3 experiment: 2020/12/4";
?>

html 程式如下:

<!DOCTYPE html>
<html>
  <body>
    <h1>Ajax Test</h1>
    <h2>@page 3</h2>
    <div>
      <label id="id1" name="id1">1<br /></label>
    </div>
   
    <p>
      <a href="index.html">index<br /></a>
      <a href="page 1.html">page 1<br /></a>
      <a href="page 2.html">page 2<br /></a>
    </p>
    <script >
      var xhttp  = new XMLHttpRequest();
      var url = "test3.php";
      xhttp.open("GET", url, true);
      xhttp.onreadystatechange = phpBack;
      xhttp.send();

      function phpBack(){
        if((xhttp.readyState == 4)&&(xhttp.status == 200)){
          document.getElementById("id1").innerText = xhttp.responseText;
        }
      }
    </script>
  </body>
</html>

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2020-12-04 15:46:27 檢舉

file://和localhost當然跨域...
請透過localhost開發。

calvintai63 iT邦新手 2 級 ‧ 2020-12-04 15:53:53 檢舉

謝謝您,我原本是想是否url有無寫法可以避免跨域,例如 url="file://test.php",但自己測仍然跨域,所以才想說問一下會不會是不是自己寫的不對.

耿直小伙 iT邦新手 1 級 ‧ 2020-12-04 16:44:51 檢舉

堅持要用 file:// 的原因是？

calvintai63 iT邦新手 2 級 ‧ 2020-12-04 16:59:38 檢舉

沒有堅持,只是不明白是否可以這樣使用,因為在vs code可以透過 open in default brower 將修改的html直接送到brower測試,但是這樣做,顯示的是 file://. 若這樣一定會跨域,就不適合debug php了

耿直小伙 iT邦新手 1 級 ‧ 2020-12-04 18:01:30 檢舉

與 File 協議與 Http 協議有關

1. 文件協議只能在本地訪問
2. 本地構建http服務器開放端口後他人也可以通過http訪問到您電腦中的文件，但是文件協議做不到
3. file協議對應有一個類似http的遠程訪問，就是ftp協議，即文件傳輸協議。
4. 文件協議無法實現跨域

參考連結：https://www.cnblogs.com/lishanlei/p/9327646.html