**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 属性是特例，它们是可以访问非同源网站的资源的。