Chrome本地跨域請求設置，實現HTML模板頁

時間 2019-12-14

原文原文鏈接

按照需求，公司如今須要經過第三方的API反饋的數據，進行在本地就能夠打開的靜態頁面程序(徹底脫離IIS等服務器)。爲了更好的維護項目，須要實現靜態HTML引入HTML模板，完成ASP.NET模板頁的相似功能。HTML自己並不具有該功能，只能藉助於JS。所以想到了使用AngularJS的ng-include或者jQuery的load。可是完成以下測試代碼後，Chrome瀏覽器，提示「Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.」。而火狐則能夠正常使用（IE和國產瀏覽器因爲本人不使用，所以未作測試）。javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#header").load("header.html");
            $("#footer").load("footer.html");
        });

    </script>
</head>
<body>
    <div>
        <h2>jQuery load 加載方式</h2>
        <div id="header"></div>
        <div id="context">頁面內容體</div>
        <div id="footer"></div>
    </div>
    <div ng-app="">
        <h2>AngularJS ng-include 指令</h2>
        <ng-include src="'header.html'"></ng-include>
        <div ng-include="'footer.html'"></div>
    </div>

</body>
</html>

致使該錯誤的緣由，主要是Chrome自身的安全機制，只須要在Chrome的快捷方式中配置一下便可解決該問題。經過關鍵詞Google"配置Chrome支持本地(File協議)AJAX請求"能夠找很多相關的解決方案。css

Webkit內核的瀏覽器安全策略決定了File協議訪問的應用沒法使用XMLHttpRequest對象，錯誤消息已經明確的指出了：html

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(跨域請求僅支持協議：http, data, chrome, chrome-extension, https.)

在Chrome的快捷方式中選擇屬性，在「目標」中按照下圖的方式進行配置，「 --allow-file-access-from-files」(複製雙引號間的文字，注意最前邊有一個空格)。「肯定」保存後，關閉Chrome瀏覽器而後再次打開後，該問題就解決了(必定要從新關閉後，不然設置不會生效，刷新頁面該問題並無獲得解決)。java

搞定後能夠正常執行：jquery