AngularJS Hatası: Çapraz kaynak istekleri yalnızca protokol şemaları için desteklenir: http, data, chrome-extension, https


130

Çok basit bir açısal js uygulamasının üç dosyam var

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>

Ürün-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 adlı özel yönergeyi kullanarak bir product-color.html eklemesi girer girmez bu hatayı almaya başladım:

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'.

Yanlış giden ne olabilir? Product-color.html için bir yol sorunu mu?

Üç dosyamın tümü aynı kök klasörde C:/user/project/


1
Benim durumumda olduğu gibi aptalca bir şey yaparsanız, yanlışlıkla TLD'yi " localhost: 8070.com " bağlantı noktasına ekledim, o zaman aynı hatayı alacağınıza dair hızlı bir işaret. Çözmeye çalıştığınız URL'yi kontrol edin!
Wildhoney


Yanıtlar:


306

Bu hata, html belgelerini doğrudan tarayıcıdan açtığınız için oluyor. Bunu düzeltmek için kodunuzu bir web sunucusundan sunmanız ve yerel ana bilgisayardan ona erişmeniz gerekir. Apache kurulumunuz varsa, dosyalarınızı sunmak için bunu kullanın. JetBrains IDE'leri, Eclipse gibi bazı IDE'ler yerleşik web sunucularına sahiptir ...

Node.Js kurulumunuz varsa, http-sunucusunu kullanabilirsiniz . Sadece çalıştırın npm install http-server -gve onu terminal gibi kullanabileceksiniz http-server C:\location\to\app.


6
Mükemmel çözüm!
Jorge

3
Http sunucusu, yerel olarak barındırmanın gördüğüm en basit yoludur. Not: Windows'ta npm yoksa, sadece node.js yükleyin ve cmd'de kullanılabilir hale gelecektir.
Oktan

3
Ve eğer androidde web görünümünde olduysa, ne yapmalıyım !?
Dr.jacky

2
Merak ettiğim için, dosyaları web tarayıcısında açmak neden mümkün değil?
tobiak777

3
@reddy Düz ve basit: Tarayıcının dosya sistemine doğrudan bilgisayarınızdan erişmesi bir güvenlik sorunudur.
Alex J

49

ÇOK BASİT DÜZELTME

  1. Uygulama dizininize gidin
  2. SimpleHTTPServer'ı başlatın


Terminalde

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

Şimdi, tarayıcınızda localhost: 8000'e gidin ve sayfa görünecektir


8
Python 3'te olmalı python -m http.server.
Luan Nico

1
Bu çok yardımcı oldu! Harika çözüm.
mirta

42

İşleme Chrome'da izin verilmiyor. Bir HTTP sunucusu (Tomcat) kullanabilir veya onun yerine Firefox kullanabilirsiniz.


4
Durumumda bunun yerine firefox kullandım ve işe yarıyor. Chrome, Firefox'tan daha fazla güvenliğe sahip mi? Bunu yapmama neden izin veriliyor ....
thatOneGuy

Benim için en iyi cevap bu.
Thomas

1
Kısa ve Basit ... Çalıştı!
viks

bana da gerçekten yardımcı oldu.
Ram Dutt Shukla

1
Hey .. çok teşekkürler .. cevabınız çok yardımcı oldu ... zamanımın çoğunu kurtardım
Megha

31

Sorunum sadece http://url adresime eklenerek çözüldü . örneğin http://localhost:3000/moviesyerine kullandım localhost:3000/movies.


13

Bunu chrome / chromium tarayıcısında kullanıyorsanız (örn: Ubuntu 14.04'te), bu sorunu çözmek için aşağıdaki komutlardan birini kullanabilirsiniz.

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

Bu, dosyayı krom veya krom olarak yüklemenize olanak tanır. Windows için aynı işlemi yapmanız gerekiyorsa, bu anahtarı krom kısayolunun özelliklerine ekleyebilir veya cmdbayrakla çalıştırabilirsiniz . Bu işleme varsayılan olarak Chrome, Opera, Internet Explorer'da izin verilmez. Varsayılan olarak yalnızca firefox ve safaride çalışır. Dolayısıyla bu komutu kullanmak size yardımcı olacaktır.

Alternatif olarak, rahat olduğunuz dile bağlı olarak herhangi bir web sunucusunda (Örnek: Tomcat-java, NodeJS-JS, Tornado-Python, vb.) Barındırabilirsiniz. Bu, herhangi bir tarayıcıdan çalışacaktır.


12

Her ne sebeple olursa olsun dosyalara bir web sunucusunda sahip olamıyorsanız ve yine de bir çeşit kısmi yükleme yöntemine ihtiyacınız varsa, ngTemplateyönergeyi kullanmaya başvurabilirsiniz .

Bu şekilde, işaretlemenizi komut dosyası etiketlerinizin içine index.html dosyanıza dahil edebilir ve gerçek yönergenin bir parçası olarak işaretlemeyi dahil etmek zorunda kalmazsınız.

Bunu index.html dosyanıza ekleyin

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

Ardından, direktifinizde:

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

Bu yazıyı zaten düzenlediğim için templateUrl kullanın: 'tpl-productColor'
HANU

5

Ana neden:

Dosya protokolü, Chrome için çapraz kaynak talebini desteklemiyor

1.Çözüm:

dosya yerine http protokolünü kullanın, bunun anlamı: apache veya nodejs + http-server gibi bir http sunucusu kurun

Bölüm 2:

Ekle --allow-file-erişimini-den-dosyaları bu kısayolu kullanarak Chrome`s kısayol hedefin sonra ve açık yeni göz örneğini

görüntü açıklamasını buraya girin

3. Çözüm:

onun yerine Firefox kullan


Firefox kullanmak bana yardımcı oldu
Vineeth Subbaraya

5
  1. Komut çalıştırarak http sunucusunu kurun npm install http-server -g
  2. Index.html dosyasının bulunduğu yolda terminali açın
  3. Komut çalıştır http-server . -o
  4. Tadını çıkar!

4

Eklemek isterim ki xampp, mamp türü şeyler kullanabilir ve projenizi htdocs klasörüne koyabilirsiniz, böylece localhost'ta erişilebilir


2

Zaten sunucu çalıştırıyorsanız , API çağrısında http: // kullanmayı unutmayın . Bu ciddi bir soruna neden olabilir.


Teşekkürler dostum, iki saat aynı soruna çözüm arıyorum ve bu ...
Santi Nunez

Hoşgeldin kardeşim. Mutlu Kodlama :)
Edison D'souza

1

Sebep

Sayfayı Apache gibi bir sunucu üzerinden açmıyorsunuz, bu nedenle tarayıcı kaynağı almaya çalıştığında, izin verilmeyen ayrı bir etki alanından geldiğini düşünür. Bazı tarayıcılar buna izin verse de.

Çözüm

İnetmgr'yi çalıştırın ve sayfanızı yerel olarak barındırın ve http: // localhost: portnumber / PageName.html olarak veya Apache, nginx, node vb. Gibi bir web sunucusu aracılığıyla göz atın .

Alternatif olarak farklı bir tarayıcı kullanın Firefox ve Safari kullanılarak doğrudan sayfa açılırken hata gösterilmedi. Yalnızca Chrome ve IE (xx) için gelir.

Brackets, Sublime veya Notepad ++ gibi kod düzenleyicileri kullanıyorsanız, bu uygulamalar bu hatayı otomatik olarak işler.


1

Bu sorun Firefox ve Safari'de olmuyor. Xml2json.js'nin en son sürümünü kullandığınızdan emin olun. Çünkü IE'de XML ayrıştırıcı hatasıyla karşılaştım. Chrome'da en iyi şekilde onu Apache veya XAMPP gibi bir sunucuda açmalısınız.



0

Aşağıdaki bayrağı kullanarak kromu açmanız gerekir Çalıştır menüsüne gidin ve "chrome --disable-web-security --user-data-dir" yazın

Chrome'u açmak için bayrağı kullanmadan önce tüm Chrome örneklerinin kapalı olduğundan emin olun. CORS'nin etkinleştirildiğini gösteren bir güvenlik uyarısı alacaksınız.


0

@Kirill Fuchs'a mükemmel bir çözüm eklemek ve @ StackUser'in şüphesini yanıtlamak - http sunucusunu başlatırken, yolu yalnızca uygulama klasörüne kadar ayarlayın, html sayfasına kadar DEĞİL! http-server C:\location\to\appve klasörün index.htmlaltından erişimapp


0

C: /user/project/index.html'ye gidin, onu Visual Studio 2017 ile açın, Dosya> Tarayıcıda Görüntüle veya Ctrl + Shift + W tuşlarına basın


-1

Ben de aynı sorunu yaşadım. app.js dosyama aşağıdaki kodu ekledikten sonra düzeltildi.

var cors = require('cors')
app.use(cors());
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.