**1. 什么是跨域訪問** 假設有 A、B 兩個網站，我們希望 A 網站可以訪問到 B 網站的數據，但是如果 A、B 網站<mark>不在同一個域內</mark>，那么就會產生跨域訪問問題，瀏覽器一般會報出如下錯誤： ```js Access to XMLHttpRequest at 'http://localhost:9527/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. ``` 這是因為跨域訪問違反了<mark>同源策略</mark>，同源策略規定了瀏覽器中不同網站之間只能訪問同源的網站資源，因為跨域瀏覽是不安全的。 <br/> **2. 什么是同源策略** 根據 [百度百科 ](https://baike.baidu.com/item/%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5/3927875?fr=aladdin)同源策略它是由 Netscape 提出的一個安全策略，它是瀏覽器最核心也是最基本的安全功能，如果缺少同源策略，則瀏覽器的正常功能可能都會受到影響，現在所有支持 JavaScript 的瀏覽器都會使用這個策略。 <br/> **3. 什么情況下是同源，什么情況下是非同源** 在協議、域名、端口號都相同的情況下是同源，相反只要這三部分有一個不同則是非同源。 ``` http://localhost:8080/web - http：協議 - localhost：域名 - 8080：端口 ``` ``` ① 協議、域名、端口號都相同，同源。 http://www.123.com/index.html 調用 http://www.123.com/welcome.jsp ② 協議不同，非同源。 https://www.123.com/index.html 調用 http://www.123.com/welcome.jsp ③ 端口不同，非同源。 http://www.123.com:8080/index.html 調用 http://www.123.com:8081/welcome.jsp ④ 域名不同，非同源 http://www.123.com/index.html 調用 http://www.456.com/welcome.jsp ⑤ 雖然localhost等同于 127.0.0.1 但是也是非同源的。說明即使IP相同，域名不同，也是非同源 http://localhost:8080/index.html 調用 http://127.0.0.1:8080/welcom.jsp ``` <br/> **4. 下面這些情況受到同源策略限制，所以不能跨域訪問** 1、Cookie、LocalStorage 和 IndexDB 無法讀取。 2、DOM 和 Js對象無法獲得。 3、AJAX 請求不能發送。 <br/> **5. 下面這些情況不受同源策略限制，可以跨域訪問** 對于像 img、iframe、script、video 等標簽的 src 屬性是特例，它們是可以訪問非同源網站的資源的。