什么是跨域？如何解决？

跨域

在了解跨域之前，我们先了解下一个域名地址的组成，就拿腾讯云+社区的 loader.js 说吧。这个一个 js 资源文件

https://cloud.tencent.com:443/qccomponent/loader.js
  

我们拆分下，这个地址包含 https（请求协议）、cloud.tencent.com（域名）、443（端口号，https 默认 443，不加也可以）及资源地址（qccomponent/loader.js）。这样一拆分就很好了解什么是跨域了。

跨域就是协议、域名、端口号中任意一个不相同时，都算作不同域。不同域之间请求资源，都算是跨域。

这里我们说明一下，为什么会出现跨域。出于浏览器的同源策略限制。同源策略会阻止一个域的 javascript 脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），因此只要其中一个不相同，就是跨域。

说明：同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略

同源策略是一个重要的安全策略，它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。如果没有同源策略的限制，用户的信息将不再是安全的，因为任何一个人都可以通过资源注入，恶意获取用户信息。

同源策略限制了哪些？

1. Cookie、LocalStorage、sessionStorag、IndexedDB 等存储性内容

2. DOM 节点

3. AJAX 请求

但是有三个标签是可以跨域访问资源的

1. <img>标签

2. <link>标签

3. <script>标签

解决跨域

1. JSONP
   上面我们说道有三个标签是可以跨域访问资源，JSONP 利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一定需要对方的服务器做支持才可以。

   
        
   
         
   
          
   
           
   
          
          
   
           
   
            <script type='text/javascript'>
           
          
         
   
          
   
           
   
          
          
   
           
   
                window.jsonpCallback = function (res) {
           
          
         
   
          
   
           
   
          
          
   
           
   
                    console.log(res)
           
          
         
   
          
   
           
   
          
          
   
           
   
                }
           
          
         
   
          
   
           
   
          
          
   
           
   
            </script>
           
          
         
   
          
   
           
   
          
          
   
           
   
            <script src='http://localhost:8080/api/jsonp?id=1&cb=jsonpCallback' type='text/javascript'></script>
           
          
        
       
   

2. CORS
   整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。

   只需要在服务器端做一些小小的改造即可：

   "Access-Control-Allow-Headers":"*"
       
   

3. nginx 反向代理
   这个我们之前公司项目使用的是这种方式，具体配置我也不太了解。