AngularJS त्रुटि: क्रॉस मूल अनुरोध केवल प्रोटोकॉल योजनाओं के लिए समर्थित हैं: http, डेटा, क्रोम-एक्सटेंशन, https


130

मेरे पास एक बहुत ही सरल कोणीय js एप्लिकेशन की तीन फाइलें हैं

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/


1
बस एक त्वरित सूचक है कि अगर आप कुछ बेवकूफ करते हैं, जैसे कि मेरे मामले में मैंने गलती से टीएलडी को बंदरगाह पर जोड़ा: " लोकलहोस्ट: 8070.com " तो आपको वही त्रुटि मिलेगी। जांच करें कि आप किस URL को हल करने का प्रयास कर रहे हैं!
Wildhoney

शायद यहां भी ऐसा ही है: stackoverflow.com/questions/10752055/…
Ngô ấc Tuấn

जवाबों:


306

यह त्रुटि इसलिए हो रही है क्योंकि आप सीधे ब्राउज़र से html दस्तावेज़ खोल रहे हैं। इसे ठीक करने के लिए आपको एक वेबसर्वर से अपने कोड की सेवा लेनी होगी और इसे लोकलहोस्ट पर एक्सेस करना होगा। यदि आपके पास अपाचे सेटअप है, तो इसे अपनी फ़ाइलों की सेवा के लिए उपयोग करें। कुछ IDE ने वेब सर्वरों में बनाया है, जैसे JetBrains IDE's, Eclipse ...

यदि आपके पास Node.Js सेटअप है तो आप http-server का उपयोग कर सकते हैं । बस चलाएं npm install http-server -gऔर आप इसे टर्मिनल की तरह उपयोग कर पाएंगे http-server C:\location\to\app


6
उत्कृष्ट समाधान!
जॉर्ज

3
Http-server सबसे सरल तरीका है जिसे मैंने स्थानीय रूप से होस्ट करने के बारे में देखा है। ध्यान दें: यदि आपके पास विंडोज़ पर npm नहीं है, तो बस node.js स्थापित करें और यह cmd में उपलब्ध हो जाएगा।
ऑक्टेन

3
और अगर यह android में webview में हुआ है, तो मुझे क्या करना चाहिए !?
डॉ। अंजनी

2
जिज्ञासा से बाहर, वेब ब्राउज़र में केवल फाइलें खोलना संभव क्यों नहीं है?
तबाक777

3
@reddy सादा और सरल: यह आपके कंप्यूटर पर सीधे फाइलसिस्टम तक पहुंचने के लिए ब्राउज़र के लिए एक सुरक्षा मुद्दा है।
एलेक्स जे

49

बहुत सरल FIX

  1. अपनी एप्लिकेशन निर्देशिका पर जाएं
  2. SimpleHTTPServer शुरू करें


टर्मिनल में

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

अब, अपने ब्राउज़र में लोकलहोस्ट पर जाएँ: 8000 और पेज दिखाई देगा


8
पायथन 3 में, यह होना चाहिए python -m http.server
लुआन निको

1
इससे काफी मदद मिली! महान समाधान।
कीर्ति

42

क्रोम में ऑपरेशन की अनुमति नहीं है। आप या तो एक HTTP सर्वर (टॉमकैट) का उपयोग कर सकते हैं या आप इसके बजाय फ़ायरफ़ॉक्स का उपयोग कर सकते हैं।


4
मैंने अपनी स्थिति के बजाय फ़ायरफ़ॉक्स का उपयोग किया और यह काम करता है। क्या क्रोम में फ़ायरफ़ॉक्स की अधिक सुरक्षा है? मुझे ऐसा करने की अनुमति क्यों दी गई ....
thatOneGuy

यही मेरे लिए सबसे अच्छा जवाब है।
थॉमस

1
लघु और सरल ... काम किया!
विक्स

वास्तव में मेरी भी मदद की।
राम दत्त शुक्ल

1
अरे..धन्यवाद .. आपका जवाब इतना बड़ा मददगार था ... मेरा इतना समय बचा लिया
मेघा

31

मेरे http://url पते को जोड़कर मेरी समस्या का समाधान कर दिया गया । उदाहरण के लिए मैंने http://localhost:3000/moviesइसके बजाय इस्तेमाल किया localhost:3000/movies


13

यदि आप क्रोम / क्रोमियम ब्राउज़र में इसका उपयोग कर रहे हैं (उदाहरण: 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

यह आपको क्रोम या क्रोमियम में फ़ाइल लोड करने की अनुमति देगा। यदि आपको विंडोज़ के लिए एक ही ऑपरेशन करना है तो आप क्रोम शॉर्टकट के गुणों में इस स्विच को जोड़ सकते हैं या इसे cmdध्वज से चला सकते हैं । डिफ़ॉल्ट रूप से क्रोम, ओपेरा, इंटरनेट एक्सप्लोरर में इस ऑपरेशन की अनुमति नहीं है। डिफ़ॉल्ट रूप से यह केवल फ़ायरफ़ॉक्स और सफारी में काम करता है। इसलिए इस कमांड का उपयोग करने से आपको मदद मिलेगी।

वैकल्पिक रूप से आप इसे किसी भी वेब सर्वर पर भी होस्ट कर सकते हैं (उदाहरण: टॉमकैट-जावा, नोडजेएस-जेएस, टॉर्नेडो-पायथन, आदि) जिस भाषा के साथ आप सहज हैं, उसके आधार पर। यह किसी भी ब्राउज़र से काम करेगा।


12

यदि किसी भी कारण से आपके पास वेबसर्वर से होस्ट की गई फाइलें नहीं हो सकती हैं और फिर भी आपको किसी तरह के लोडिंग पार्टिकल्स की जरूरत है, तो आप 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'
      };
   }
  );

जैसा कि मैंने पहले ही इस पोस्ट का उपयोग कर लिया है टेम्पलेट का उपयोग करें: 'tpl-productColor'
HANU

5

मूल कारण:

फ़ाइल प्रोटोकॉल क्रोम के लिए क्रॉस मूल अनुरोध का समर्थन नहीं करता है

समाधान 1:

फ़ाइल के बजाय http प्रोटोकॉल का उपयोग करें, जिसका अर्थ है: एक http सर्वर, जैसे अपाचे, या नोडज + http-सर्वर सेट करें

खटास 2:

Chrome के शॉर्टकट लक्ष्य के बाद --allow-file-access-from-files जोड़ें और इस शॉर्टकट का उपयोग करके नए ब्राउज़ उदाहरण खोलें

यहाँ छवि विवरण दर्ज करें

समाधान 3:

इसके बजाय फ़ायरफ़ॉक्स का उपयोग करें


फ़ायरफ़ॉक्स का उपयोग करने से मुझे मदद मिली
विनेथ सुब्बाराया

5
  1. Http- सर्वर, रनिंग कमांड स्थापित करें npm install http-server -g
  2. उस पथ में टर्मिनल खोलें जहां index.html स्थित है
  3. चलाने के आदेश http-server . -o
  4. का आनंद लें!

4

मैं यह जोड़ना चाहूंगा कि कोई भी xampp, mamp प्रकार की चीजों का उपयोग कर सकता है और अपनी परियोजना को htdocs फ़ोल्डर में रख सकता है ताकि यह लोकलहोस्ट के लिए सुलभ हो।


2

यदि आप पहले से ही सर्वर चला रहे हैं, तो एपीआई कॉल में http: // का उपयोग करना न भूलें । यह एक गंभीर परेशानी का कारण हो सकता है।


धन्यवाद आदमी, दो घंटे ही समस्या का हल की तलाश में और था यह ...
सैंटी नुनेज

भाई, आपका स्वागत है। हैप्पी कोडिंग :)
एडिसन डिसूज़ा

1

कारण

आप Apache जैसे सर्वर के माध्यम से पेज नहीं खोल रहे हैं, इसलिए जब ब्राउज़र संसाधन प्राप्त करने की कोशिश करता है तो उसे लगता है कि यह एक अलग डोमेन से है, जिसकी अनुमति नहीं है। हालांकि कुछ ब्राउज़र इसकी अनुमति देते हैं।

समाधान

Inetmgr चलाएं और अपने पृष्ठ को स्थानीय रूप से होस्ट करें और http: // localhost: portnumber / PageName.html या वेब सर्वर जैसे Apache, nginx, नोड आदि के माध्यम से ब्राउज़ करें ।

वैकल्पिक रूप से एक अलग ब्राउज़र का उपयोग करें फ़ायरफ़ॉक्स और सफारी का उपयोग करते हुए सीधे पेज खोलने पर कोई त्रुटि नहीं दिखाई गई थी। यह केवल क्रोम और IE (xx) के लिए आता है।

यदि आप ब्रैकेट, उदात्त या नोटपैड ++ जैसे कोड संपादकों का उपयोग कर रहे हैं, तो वे ऐप्स इस त्रुटि को स्वचालित रूप से संभालते हैं।


1

यह समस्या फ़ायरफ़ॉक्स और सफारी में नहीं हो रही है। सुनिश्चित करें कि आप xml2json.js के नवीनतम संस्करण का उपयोग कर रहे हैं। क्योंकि मैं IE में XML पार्सर त्रुटि का सामना करना पड़ा। Chrome में सबसे अच्छे तरीके से आपको इसे Apache या XAMPP जैसे सर्वर में खोलना चाहिए।



0

आपको निम्न ध्वज का उपयोग करके क्रोम को खोलना होगा। रन मेनू पर जाएं और "chrome --disable-web-security --user-data-dir" टाइप करें।

क्रोम को खोलने के लिए ध्वज का उपयोग करने से पहले सुनिश्चित करें कि क्रोम के सभी उदाहरण बंद हैं। आपको एक सुरक्षा चेतावनी मिलेगी जो इंगित करती है कि कोर सक्षम है।


0

@Kirill Fuchs में उत्कृष्ट समाधान जोड़ना और @ StackUser के संदेह का जवाब देना - http-server को शुरू करते समय, केवल ऐप फ़ोल्डर तक पथ सेट करें, html पेज तक नहीं! http-server C:\location\to\appऔर फ़ोल्डर के index.htmlतहत पहुंचapp


0

C: /user/project/index.html पर नेविगेट करें, इसे Visual Studio 2017, फ़ाइल> ब्राउज़र में देखें या Ctrl + Shift + W दबाएं


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.