跨域問題原因分析與解決辦法

1.問題

前端報跨域錯誤，導致頁面錯誤或展示異常等問題，如圖

2.原因

CORS，常被大家稱之為跨越問題，准確的叫法是跨域資源共享（CORS，Cross-origin resource sharing），是W3C標准，是一種機制，它使用額外的HTTP頭來告訴瀏覽器 讓運行在一個 origin (domain) 上的Web應用被准許訪問來自不同源服務器上的指定的資源。當一個資源從與該資源本身所在的服務器不同的域或端口請求一個資源時，資源會發起一個跨域 HTTP 請求。

什么情況下會存在跨域？

1）XMLHttpRequest 或 Fetch 發起的跨域 HTTP 請求。
2）Web 字體 (CSS 中通過 @font-face 使用跨域字體資源),，因此，網站就可以發布 TrueType 字體資源，並只允許已授權網站進行跨站調用。
3）WebGL 貼圖。
4）使用 drawImage 將 Images/video 畫面繪制到 canvas
5）樣式表（使用 CSSOM）。

以Web 字體 為例，引起跨域問題的字體導入方式如下：

3.解決方法

在被訪問資源服務器配置跨域設置，允許某個域名或所有域名發起的跨域請求。下面以MVC項目為例講解如何設置跨域配置

方法一（允許全部域名）：

最簡單的設置，就是在 Web.config 中，將 Access-Control-Allow-Origin 設置為 * 即可，如下所示

<system.webServer>
    <!-- 其它配置 -->
    <httpProtocol>
        <customHeaders>
            <!-- 跨域配置 -->
            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

方法二（指定具體的單個域名）：

這種情況很好處理，在上面的配置中，將 Access-Control-Allow-Origin 的 value 設置為該域名（http://bbb.aaa.com）即可。注意不能使用泛域名。

方法三（指定多個域名）：

安裝URL Rewrite 組件

• 可以從微軟官方下載 URL Rewrite（支持 IIS 7 以及之后的版本）
• 可以在 IIS 中使用 Web 平台安裝器 進行安裝

該組件安裝好后（重啟服務器），在 Web.config 中定位到 <system.webServer>，不用再添加 <httpProtocol> 中的跨域配置了，取而代之的是添加 <rewrite> 的配置，如下所示

<system.webServer>
    <!-- 其它配置 -->
    <rewrite>
        <outboundRules>
            <rule name="AddCrossDomain">
                <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
                <conditions logicalGrouping="MatchAll" trackAllCaptures="true">
                    <add input="{HTTP_ORIGIN}" pattern="(http(s)?://((.+\.)?domain1\.com|(.+\.)?domain2\.com|(.+\.)?domain3\.com))" />
                </conditions>
                <action type="Rewrite" value="{C:0}" />
            </rule>
        </outboundRules>
    </rewrite>
</system.webServer>

---

參考：

https://blog.csdn.net/xcbeyond/article/details/84453832

https://www.jianshu.com/p/85855a991275