一、什麼是跨域？

　　定義：是指瀏覽器不能執行其他網站的指令碼，它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript實施的安全限制。

　　同源策略限制了以下行為：

　　1、Cookie、LocalStorage和IndexDB無法讀取

　　2、DOM和js物件無法獲取

　　3、ajax請求無法傳送

二、為什麼要跨域？　　

　　跨域問題來源於JavaScript的同源策略，即只有 協議+主機名+埠號(如存在)相同，則允許相互訪問。

　　那麼跨域就是在 協議+主機名+埠號(如存在)不相同時，讓其允許相互訪問。

三、webapi跨域解決辦法

　　跨域解決辦法有多種， 這裡我給出最近在webapi + vue 實現前後端分離專案開發中的跨域解決方案：

　　（1）WebApi配置檔案裡面新增如下配置資訊即可

 <system.webServer>
     <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="*" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        </customHeaders>
     </httpProtocol>
 </system.webServer>

　　（2）當遇到WebApi要開啟session會話時，那麼前端和後端的配置資訊如下

webapi端（webapi預設是不支援session會話，需先手動設定其支援session會話）

 <system.webServer>
     <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="http://localhost:8080" />  //此時這裡就不能為 * ，要填前端專案的正確域名地址
            <add name="Access-Control-Allow-Headers" value="*" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
            <add name="Access-Control-Allow-Credentials" value="true"/>
        </customHeaders>
     </httpProtocol>
 </system.webServer>

Vue端

● 每個ajax請求都需將 withCredentials = true