AngularJS錯誤：跨起源請求只支持協議方案：HTTP，數據，鍍鉻的擴展，HTTPS

111

我有一個非常簡單的角度JS應用AngularJS錯誤：跨起源請求只支持協議方案：HTTP，數據，鍍鉻的擴展，HTTPS

的index.html

<!DOCTYPE html> 
<html ng-app="gemStore"> 
    <head> 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script> 
    <script type="text/javascript" src="app.js"></script> 
    </head> 

    <body ng-controller="StoreController as store"> 
     <div class="list-group-item" ng-repeat="product in store.products"> 
     <h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3> 
     </div> 

    <product-color></product-color> 
    </body> 
</html>

的三個文件

產品color.html

<div class="list-group-item"> 
    <h3>Hello <em class="pull-right">Brother</em></h3> 
</div>

個app.js

(function() { 
    var app = angular.module('gemStore', []); 

    app.controller('StoreController', function($http){ 
       this.products = gem; 
      } 
); 

    app.directive('productColor', function() { 
     return { 
      restrict: 'E', //Element Directive 
      templateUrl: 'product-color.html' 
     }; 
    } 
); 

    var gem = [ 
       { 
        name: "Shirt", 
        price: 23.11, 
        color: "Blue" 
       }, 
       { 
        name: "Jeans", 
        price: 5.09, 
        color: "Red" 
       } 
    ]; 

})();

，我開始收到此錯誤，當我進入了一個使用名爲productColor定製指令包括產品color.html的：

XMLHttpRequest cannot load file:///C:/product-color.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. 
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/product-color.html'.

什麼可能去錯了嗎？這是product-color.html的路徑問題嗎？

我所有的三個文件是在同一個根文件夾C:/user/project/

來源

2015-01-02 user3422637

只是一個快速的指針，如果你做一些愚蠢的事，比如在我的情況我不小心附加的TLD的端口：「HTTP：//本地主機：8070.com」那麼你會收到同樣的錯誤。檢查您嘗試解決的URL！ – Wildhoney

也許在這裏類似： http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local/38320697#38320697 –

可能[「只有HTTP支持跨源請求」。加載本地文件時出錯]（https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local） – vaxquis

271

此錯誤發生，因爲你只是從瀏覽器中打開HTML文件直接。要解決這個問題，你需要從web服務器提供你的代碼並在localhost上訪問它。如果您有Apache安裝程序，請使用它來提供您的文件。有些IDE內置Web服務器，如JetBrains IDE，Eclipse ...

如果您有Node.Js設置，那麼您可以使用http-server。只需運行npm install http-server -g，您就可以在終端中使用它，如http-server C:\location\to\app。

來源

2015-01-02 14:01:07

優秀的解決方案！ – Jorge

http-server是我見過的在本地託管的最簡單的方式。注意：如果你在windows上沒有npm，只需安裝node.js，它將在cmd中可用。 – Octane

如果它發生在android的webview中，我該怎麼做！？ –

我想補充一點，人們也可以使用XAMPP，甲基苯丙胺類的東西，把你的項目在htdocs文件夾所以它是在本地主機上

來源

2015-02-14 15:26:36 bullettrain

操作訪問是不允許的鉻。您可以使用HTTP服務器（Tomcat），也可以使用Firefox。

來源

2015-03-30 15:42:12 daniel

我用firefox代替了我的情況，它工作。 Chrome是否具有Firefox的更高安全性？爲什麼我允許這樣做...... – thatOneGuy

這對我來說是最好的答案。 – Thomas

短而簡單...工作！ – viks

如果由於某種原因您不能有文件從網絡服務器託管，仍然需要某種加載部分的方式，您可以訴諸使用ngTemplate指令。

這樣，您可以在index.html文件中的腳本標記中包含標記，而不必將標記包含在實際指令中。

添加到您的index.html

<script type='text/ng-template' id='tpl-productColour'> 
<div class="list-group-item"> 
    <h3>Hello <em class="pull-right">Brother</em></h3> 
</div> 
</script>

然後，在你的指令：

app.directive('productColor', function() { 
     return { 
      restrict: 'E', //Element Directive 
      //template: 'tpl-productColour' 
      templateUrl: 'tpl-productColour' 
     }; 
    } 
);

來源

2015-04-14 13:47:15 link64

因爲我已經編輯這篇文章使用 templateUrl：'tpl-productColor' – HANU

原因

你不通過服務器中打開網頁，類似Apache，所以當瀏覽器試圖獲取資源時，它認爲它來自一個單獨的域，這是不允許的。雖然有些瀏覽器確實允許。

解決方案

運行INETMGR和本地建立你的網頁瀏覽] http://localhost:portnumber/PageName.html或通過如Apache，Nginx的，節點等網絡服務器

或者使用其他瀏覽器未顯示錯誤當使用Firefox和Safari直接打開頁面時。它只適用於Chrome和IE（xx）。

如果您使用Brackets，Sublime或Notepad ++等代碼編輯器，這些應用程序會自動處理此錯誤。

來源

2015-04-24 05:04:40

很簡單FIX

轉到您的應用程序目錄
開始SimpleHTTPServer

在終端

$ cd yourAngularApp 
~/yourAngularApp $ python -m SimpleHTTPServer

現在，到localhos t：8000在你的瀏覽器和頁面將顯示

來源

2015-04-30 04:31:15 Chirag

在Python 3中，它應該是'python -m http.server'。 –

這幫了很多！好的解決方案 – mirta

如果你在鉻/鉻瀏覽器（例如：在Ubuntu 14.04中）使用這個，你可以使用下面的命令來解決這個問題。

ThinkPad-T430:~$ google-chrome --allow-file-access-from-files 
ThinkPad-T430:~$ google-chrome --allow-file-access-from-files fileName.html 

ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files 
ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files fileName.html

這將允許您加載鉻或鉻文件。如果您必須對Windows執行相同的操作，則可以將此開關添加到Chrome快捷方式的屬性中，或者使用該標誌從cmd運行它。 Chrome，Opera，Internet Explorer默認情況下不允許執行此操作。默認情況下，它只適用於Firefox和Safari瀏覽器。因此使用這個命令會幫助你。

或者，您也可以基於您熟悉的語言，在任何Web服務器上託管它（例如：Tomcat-java，NodeJS-JS，Tornado-Python等）。這將從任何瀏覽器工作。

來源

2015-05-12 10:48:14

我的問題是通過將http://添加到我的網址來解決的。例如我使用而不是localhost:3000/movies來代替http://localhost:3000/movies。

來源

2015-11-03 20:28:26

這個問題在Firefox和Safari中沒有發生。確保您使用的是最新版本的xml2json.js。因爲我遇到了IE中的XML解析器錯誤。在Chrome最好的方式下，你應該像Apache或XAMPP那樣在服務器上打開它。

來源

2015-11-20 06:10:11

那裏是一款Chrome擴展200 OK了鍍鉻web服務器只想補充一點，並選擇您的文件夾

來源

2016-10-02 09:21:31

優秀的解決方案 –

您可以選擇使用以下標誌進入運行菜單和類型「在Chrome中打開鉻--disable- web-security --user-data-dir「

請確保在使用該標誌打開chrome之前，所有關於chrome的實例都已關閉。您將收到一條安全警告，指出CORS已啓用。

來源

2016-11-02 18:40:44 Manas

如果您已經在運行服務器，請不要忘記在API調用中使用http：//。這可能會導致嚴重的麻煩。

來源

2016-11-15 13:03:20

感謝男人，兩個小時尋找解決相同問題的解決方案，並且這是... –

歡迎兄弟。快樂編碼:) –

添加到@Kirill Fuchs出色的解決方案並回答@ StackUser的疑問 - 啓動http-server時，將路徑設置爲只有app文件夾，直到html頁面！ http-server C:\location\to\app和index.html下app文件夾的訪問

來源

2017-03-10 04:13:25 Teejay

根本原因：

文件協議不爲Chrome

支持跨原點請求

解決方案1：

使用http協議，而不是文件，意思是：設置一個http服務器，比如apache，或者nodejs + http-server

Sotution 2：

添加 後--allow-文件訪問從檔案 Chrome`s快捷方式目標，並使用該快捷

打開新的瀏覽情況

解決方案3：

使用Firefox而不是

來源

2017-08-11 05:35:49

使用Firefox幫助了我 –

安裝HTTP服務器，運行命令npm install http-server -g
開，其中位於中的index.html
運行命令http-server . -o
路徑終端享受吧！

來源

2017-12-15 14:36:03

我有同樣的問題。在將以下代碼添加到我的app.js文件中後，它已修復。

var cors = require('cors') 
app.use(cors());

來源

2017-12-17 19:06:49

AngularJS錯誤：跨起源請求只支持協議方案：HTTP，數據，鍍鉻的擴展，HTTPS

回答

相關問題