請問AJAX出現CORS ERROR該怎麼解決呢?

javascript ajax

帥帥大阿湯 2023-03-01 20:39:36 ‧ 4230 瀏覽

分享至

各位大大好!小弟，有買一本書叫Javascript第一次學就上手，讀到Ajax的範例，自己重新手打過後，出現CORS ERROR，我該如何解決呢?

ERROR照片訊息如下:

ERROR訊息如下:

Access to XMLHttpRequest at 'file:///C:/Users/toudf/OneDrive/%E6%A1%8C%E9%9D%A2/%E8%87%AA%E5%B7%B1%E7%B7%B4%E7%BF%92/Javascript/ajax/books.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

json.html:13          
GET file:///C:/Users/toudf/OneDrive/%E6%A1%8C%E9%9D%A2/%E8%87%AA%E5%B7%B1%E7%B7%B4%E7%BF%92/Javascript/ajax/books.json net::ERR_FAILED

html程式碼如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="utility.js"></script>
    <script>
      var XHR = null;

      function startRequest() {
        XHR = createXMLHttpRequest();
        XHR.open("GET", "books.json", true);
        XHR.onreadystatechange = handleStateChange; 
        XHR.send(null);
      }
      
      function handleStateChange() {
        if (XHR.readyState == 4) {
          if (XHR.status == 200) {
		        data = JSON.parse(XHR.responseText);
			      var newContent = '';
            for (var i = 0; i < data.length; i++) {
              newContent += '<p>' + data[i].title + '</p>';
            }
            document.getElementById("span1").innerHTML = newContent;
		    } 
          else
            window.alert("無法顯示書名!");
        }
      }
    </script>
  </head>
  <body>
    <form id="form1">
      <input id="button1" type="button" value="顯示書名" onclick="startRequest()">
      <br><br><span id="span1"></span>
    </form>
  </body>
</html>

utility.js程式碼如下:

function createXMLHttpRequest()
{
  try						//其它非IE的瀏覽器
  {
    var XHR = new XMLHttpRequest();
  }
  catch(e1)
  {
    try						//IE6+瀏覽器
    {
      var XHR = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e2)
    {
      try					//IE5瀏覽器
      {
        var XHR = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e3)				//不支援Ajax
      {
        XHR = false;
      }
    }
  }
  return XHR;
}

book.json程式碼如下:

[
  {
    "title": "新趨勢計算機概論",
    "price": 500,
    "description": "針對大專院校計算機概論課程所設計"
  },
  {
    "title": "新趨勢網路概論",
    "price": 520,
    "description": "針對大專院校網路概論課程所設計"
  },
  {
    "title": "網頁程式設計",
    "price": 490,
    "description": "涵蓋網頁程式設計相關技術"
  }
]

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

前端野人 iT邦新手 3 級 ‧ 2023-03-01 21:41:42 檢舉

你這個CORS 也不是我們平常遇到的CORS就不跟你講正規解法了
這個是瀏覽器擋住了，你用這個參數 --disable-web-security 另開關掉安全機制的瀏覽器運作https://alfilatov.com/posts/run-chrome-without-cors/

japhenchen iT邦超人 1 級 ‧ 2023-03-02 07:53:50 檢舉

只能從伺服器端下手設定 Header always append Content-Security-Policy 這類的設定，不然，你就改用python+selenium模擬滑鼠鍵盤的操作吧

froce iT邦大師 1 級 ‧ 2023-03-02 09:07:37 檢舉

他這是直接讀取本機上的檔案，跟本加不了header。

1. 一般來說，都要經過一層web server，就算你是在本機開發的也一樣。
2. 想像一下，你現在用file://去做開發，等到要布上網路的時候你是不是也一樣要全部改掉?
3. 如果你有用webpack/vite這類工具，在打包的時候，可以靠區分debug模式和production模式去改變api server的domain，實際上要寫的code只是一兩行判斷式，而不是整個專案到處找。

所以請習慣用個web server去做fake api server的開發模式。
而且這個工具有很多，昨天還有人問
https://ithelp.ithome.com.tw/questions/10212198

帥帥大阿湯 iT邦新手 4 級 ‧ 2023-03-20 22:30:25 檢舉

謝謝大家

帥帥大阿湯 iT邦新手 4 級 ‧ 2023-03-20 22:37:47 檢舉

我可以自己寫json檔案放在自己的github上，使用上述程式碼連線自己github上JSON檔可以嗎?

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

ted_chou12

iT邦新手 5 級 ‧ 2023-03-02 07:55:24

是,這不是CORS 的問題
你是用 file:///C:/Users/toudf/OneDrive/%E6%A1%8C%E9%9D%A2/%E8%87%AA%E5%B7%B1%E7%B7%B4%E7%BF%92/Javascript/ajax/books.json 在跑你的綱頁的, 應該要用真正的 server 來跑.
找找看 Apache, XAMPP, MAMP 之類的.
https://www.apachefriends.org/jp/index.html
之後再用 http://localhost/%E6%A1%8C%E9%9D%A2/%E8%87%AA%E5%B7%B1%E7%B7%B4%E7%BF%92/Javascript/ajax/books.json
來跑得話應該就沒問題了.