asp.net—WebApi跨域

一、什么是跨域？

　　定義：是指瀏覽器不能執行其他網站的腳本，它是由瀏覽器的同源策略造成的，是瀏覽器對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