XMLHttpRequest फ़ाइल लोड नहीं की जा सकती। क्रॉस मूल अनुरोध केवल HTTP के लिए समर्थित हैं


113

मुझे निम्नलिखित त्रुटि प्राप्त हो रही है:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP. 

मुझे एहसास है कि इस सवाल का जवाब पहले दिया गया है, लेकिन मुझे अभी भी मेरी समस्या का हल नहीं मिला है। मैंने chrome.exe --allow-file-access-from-filesकमांड प्रॉम्प्ट से चलने की कोशिश की , और फ़ाइल को स्थानीय फ़ाइल सिस्टम में स्थानांतरित कर दिया, लेकिन मुझे अभी भी वही त्रुटि मिलती है।

मैं किसी भी सुझाव की सराहना करता हूं!


शायद यहाँ भी ऐसा ही हो! stackoverflow.com/questions/10752055/…
Ngô ấc

जवाबों:


155

यदि आप अपने व्यक्तिगत कंप्यूटर पर कोड संपादक में HTML और जावास्क्रिप्ट लिखने जैसे कुछ कर रहे हैं, और अपने ब्राउज़र में आउटपुट का परीक्षण कर रहे हैं, तो आपको संभवतः त्रुटि संदेश मिलेंगे Cross Origin Requests। आपका ब्राउज़र HTML रेंडर करेगा और आपके ब्राउज़र में Javascript, jQuery, angularJs चलाएगा, बिना सर्वर सेट किए। लेकिन कई वेब ब्राउज़र क्रॉस साइट हमलों के लिए देखने के लिए प्रोग्राम किए गए हैं, और अनुरोधों को ब्लॉक करेंगे। आप नहीं चाहते हैं कि कोई भी आपके हार्ड ड्राइव को आपके वेब ब्राउज़र से पढ़ सके। आप नोटपैड ++ का उपयोग करके एक पूरी तरह से कार्यशील वेब पेज बना सकते हैं, जो जावास्क्रिप्ट को चलाएगा, और jQuery और कोणीयज जैसे फ्रेमवर्क; और नोटपैड ++ मेनू आइटम का उपयोग करके सब कुछ परीक्षण करें,RUN, LAUNCH IN FIREFOX। वेब पेज बनाना शुरू करने का यह एक अच्छा, आसान तरीका है, लेकिन जब आप लेआउट, सीएसएस और सरल पेज नेविगेशन से अधिक कुछ भी बनाना शुरू करते हैं, तो आपको अपनी मशीन पर स्थानीय सर्वर सेट करने की आवश्यकता होती है।

यहां कुछ विकल्प दिए गए हैं जिनका मैं उपयोग करता हूं।

  1. अपने वेब पेज को स्थानीय रूप से फ़ायरफ़ॉक्स पर टेस्ट करें, फिर अपने होस्ट पर तैनात करें।
  2. या: एक स्थानीय सर्वर चलाएँ

फ़ायरफ़ॉक्स पर टेस्ट, होस्ट करने के लिए तैनात करें

  1. फ़ायरफ़ॉक्स वर्तमान में आपकी हार्ड ड्राइव से दी गई फ़ाइलों से क्रॉस ओरिजिनल अनुरोध की अनुमति देता है
  2. आपकी वेब होस्टिंग साइट फ़ोल्डर्स में फ़ाइलों को अनुरोधों को प्रकट फ़ाइल द्वारा कॉन्फ़िगर करने की अनुमति देगा

एक स्थानीय सर्वर चलाएँ

  • अपने कंप्यूटर पर एक सर्वर चलाएं, जैसे Apache या Python
  • अजगर एक सर्वर नहीं है, लेकिन यह एक साधारण सर्वर चलाएगा

पायथन के साथ एक स्थानीय सर्वर चलाएं

अपना आईपी पता प्राप्त करें:

  • विंडोज पर: 'कमांड प्रॉम्प्ट' खोलें। सभी कार्यक्रम, सहायक उपकरण, कमांड प्रॉम्प्ट
  • मैं हमेशा चलाने Command Promptके रूप में AdministratorCommand Promptमेनू आइटम पर राइट क्लिक करें और देखेंRun As Administrator
  • कमांड टाइप करें: ipconfigऔर एंटर दबाएं।
  • इसके लिए देखें: IPv4 पता । । । । । । । 12.123.123.00
  • ऐसी वेबसाइटें हैं जो आपके आईपी पते को भी प्रदर्शित करेंगी

यदि आपके पास पायथन नहीं है, तो उसे डाउनलोड और इंस्टॉल करें।

'कमांड प्रॉम्प्ट' का उपयोग करते हुए आपको उस फ़ोल्डर में जाना चाहिए जहां फाइलें हैं जिन्हें आप वेबपेज के रूप में सेवा देना चाहते हैं।

  • यदि आपको C: \ Root निर्देशिका में वापस जाना है - cd /
  • जहाँ आपके .Html फ़ाइल है (या pht, आदि) फ़ोल्डर में लाने के लिए cd ड्राइव: \ Folder \ Folder \ etc
  • पथ की जाँच करें। प्रकार: कमांड प्रॉम्प्ट पर पथ। आपको उस फ़ोल्डर को पथ देखना होगा जहां अजगर स्थित है। उदाहरण के लिए, यदि अजगर C: \ Python27 में है, तो आपको वह पता सूचीबद्ध पथों में देखना होगा।
  • यदि पायथन निर्देशिका का पथ पथ में नहीं है, तो आपको पथ सेट करना होगा। प्रकार: मदद पथ और हिट दर्ज करें। आप पथ के लिए मदद देखेंगे।
  • कुछ इस तरह लिखें: पथ c: \ python27% पथ%
  • % पथ% आपके सभी वर्तमान पथों को बनाए रखता है। आप अपने सभी मौजूदा रास्तों को मिटा देना नहीं चाहते हैं, बस एक नया रास्ता जोड़ना चाहते हैं।
  • फ़ोल्डर से नया पथ बनाएँ जहाँ आप फ़ाइलों की सेवा करना चाहते हैं।
  • पायथन सर्वर शुरू करें: टाइप करें: python -m SimpleHTTPServer portजहां 'पोर्ट' आपके इच्छित पोर्ट की संख्या है, उदाहरण के लिएpython -m SimpleHTTPServer 1337
  • यदि आप पोर्ट को खाली छोड़ देते हैं, तो यह 8000 पोर्ट को डिफॉल्ट करता है
  • यदि पायथन सर्वर सफलतापूर्वक शुरू होता है, तो आपको एक संदेश दिखाई देगा।

स्थानीय रूप से आप वेब एप्लिकेशन चलाएं

  • एक ब्राउज़र खोलें
  • पता पंक्ति प्रकार में: http://your IP address:port
  • http://xxx.xxx.x.x:1337 या http://xx.xxx.xxx.xx:8000डिफ़ॉल्ट के लिए
  • यदि सर्वर काम कर रहा है, तो आपको ब्राउज़र में अपनी फ़ाइलों की एक सूची दिखाई देगी
  • उस फ़ाइल पर क्लिक करें जिसे आप सेवा करना चाहते हैं, और इसे प्रदर्शित करना चाहिए।

अधिक उन्नत समाधान

  • एक कोड संपादक, वेब सर्वर और अन्य सेवाओं को स्थापित करें जो एकीकृत हैं।

आप अपाचे, पीएचपी, पायथन, एसक्यूएल, डीबगर्स आदि को अलग से अपनी मशीन पर स्थापित कर सकते हैं, और फिर बहुत समय बिताने के लिए यह पता लगाने की कोशिश करेंगे कि उन सभी को एक साथ कैसे काम करना है, या एक समाधान की तलाश करें जो उन सभी चीजों को जोड़ती है।

मुझे नेटबेन्स आईडीई के साथ एक्सएएमपीपी का उपयोग करना पसंद है। आप WAMP भी स्थापित कर सकते हैं जो User Interfaceअपाचे और अन्य सेवाओं के प्रबंधन और एकीकरण के लिए प्रदान करता है ।


1
यदि आप MSDOS कमांड प्रॉम्प्ट से कमांड चलाने से परिचित नहीं हैं, तो आप विकिपीडिया पर अधिक जानकारी प्राप्त कर सकते हैं: [लिंक] en.wikipedia.org/wiki/List_of_DOS_commands
एलन वेल्स

क्या इस मुद्दे को केवल वैंप के साथ हल करने का एक तरीका है? मैं वैंप चला रहा हूं और अभी भी यह संदेश प्राप्त कर रहा हूं। Apache, php और mysql सभी अद्यतित हैं
user2883071

दुर्भाग्य से मैं WAMP का उपयोग नहीं कर रहा हूं, और आपके लिए कोई जवाब नहीं है। शायद अपने सेट अप के लिए एक नया प्रश्न पूछें।
एलन वेल्स

क्या क्रॉस मूल जांच को अक्षम करने या फ़ाइल को जोड़ने का एक तरीका है: // इसमें प्रोटोकॉल? मैं एक मोबाइल वेबव्यू में काम कर रहा हूँ जो फ़ाइल को दिखाता है: // s कि मैप में संसाधनों का एपीके // ... "> एक XMLHttpRequest के लिए।
mtsvetkov

नेवरमाइंड, ने इसे ऐप इंटेन्ड्ट के साथ जोड़कर तय किया और नेवी हैरफेट्स की अनुमति दी। डेस्कटॉप पर मैंने डिबगिंग के लिए क्रोम हेडर को क्रोम से जोड़ा।
मटसेकोव

91

सरल उपाय

यदि आप शुद्ध html / js / css फाइलों के साथ काम कर रहे हैं।

क्रोम में इस छोटे सर्वर ( लिंक ) ऐप को इंस्टॉल करें । ऐप खोलें और फ़ाइल स्थान को अपनी परियोजना निर्देशिका में इंगित करें।

एप्लिकेशन में दिखाए गए यूआरएल को गोटो करें।

संपादित करें: घोल का उपयोग करते हुए होशियार समाधान

चरण 1: गुलप को स्थापित करने के लिए। अपने टर्मिनल में निम्नलिखित कमांड चलाएँ।

npm install gulp-cli -g
npm install gulp -D

चरण 2: अपनी परियोजना निर्देशिका के अंदर gulpfile.js नामक एक फ़ाइल बनाएँ। इसके अंदर निम्नलिखित सामग्री की प्रतिलिपि बनाएँ।

var gulp        = require('gulp');
var bs          = require('browser-sync').create();   

gulp.task('serve', [], () => {
        bs.init({
            server: {
               baseDir: "./",
            },
            port: 5000,
            reloadOnRestart: true,
            browser: "google chrome"
        });
        gulp.watch('./**/*', ['', bs.reload]);
});

चरण 3: ब्राउज़र सिंक gulp प्लगइन स्थापित करें। उसी निर्देशिका के अंदर जहां gulpfile.js मौजूद है, निम्न कमांड चलाएँ

npm install browser-sync gulp --save-dev

चरण 4: सर्वर शुरू करें। उसी निर्देशिका के अंदर जहां gulpfile.js मौजूद है, निम्न कमांड चलाएँ

gulp serve

6
बहुत खुबस! सैंडी का जवाब व्यापक है, लेकिन आपका जवाब इसे 'अब काम करने' की सुविधा के लिए हाथों-हाथ लेता है।
४१ पर होल्फ

1
प्रतिभाशाली! कोर काम करने के लिए फैंसी दिनचर्या याद रखने की जरूरत नहीं है!
स्टॉयन बेरोव

उत्कृष्ट छोटे अनुप्रयोग। Thx :)
मार्क

शानदार, सबसे अच्छा और सबसे सरल उपाय
firasKoubaa

1
वह लिंक अब उपलब्ध नहीं है
gbade_

2

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

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


2

एलन वेल्स के विस्तृत जवाब में जोड़ने के लिए यहां एक त्वरित समाधान है

एक स्थानीय सर्वर चलाएँ

आप की सेवा कर सकते हैं किसी भी के साथ अपने कंप्यूटर में फ़ोल्डर की सेवा

सबसे पहले, उस फ़ोल्डर में कमांड लाइन का उपयोग करके नेविगेट करें जिसे आप सेवा करना चाहते हैं।

फिर

npx i -g serve
serve

या यदि आप इसे डाउनलोड करने के साथ सेवा करना चाहते हैं

npx serve

और बस! आप अपनी फ़ाइलों को http: // localhost: 5000 पर देख सकते हैं

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


1

जब मैं अपनी वेब एपीआई परियोजना को स्थानीय रूप से तैनात कर रहा था तो मुझे इस त्रुटि का सामना करना पड़ रहा था और मैं नीचे दिए गए इस URL के साथ केवल एपीआई परियोजना को बुला रहा था:

स्थानीय होस्ट // myAPIProject

चूंकि त्रुटि संदेश कहता है कि यह http: // नहीं है, इसलिए मैंने URL को बदल दिया और नीचे दिए गए अनुसार एक उपसर्ग http डाला और त्रुटि चली गई।

http: // स्थानीय होस्ट // myAPIProject


0

यदि आप WebStorm Javascript IDE का उपयोग करते हैं , तो आप बस अपने ब्राउज़र में WebStorm से अपना प्रोजेक्ट खोल सकते हैं। WebStorm स्वचालित रूप से एक सर्वर शुरू करेगा और आपको इनमें से कोई भी त्रुटि नहीं मिलेगी, क्योंकि अब आप अनुमत / समर्थित प्रोटोकॉल (HTTP) के साथ फाइल एक्सेस कर रहे हैं।


0

आपकी आवश्यकताओं पर निर्भर करता है, लेकिन http://myjson.com पर अपने JSON को सहेजकर अस्थायी रूप से अपने (डमी) JSON की जांच करने का एक त्वरित तरीका भी है । एपीआई लिंक को कॉपी करें और अपने जावास्क्रिप्ट कोड में पेस्ट करें। आहा! जब आप कोड को तैनात करना चाहते हैं, तो आपको अपने कोड में उस यूआरएल को बदलना नहीं भूलना चाहिए!


-2

अपने प्रोजेक्ट फ़ोल्डर को Xampp निर्देशिका के htdocs में रखें। अपने Apache सर्वर को xampp नियंत्रण कक्ष का उपयोग करके प्रारंभ करें, फिर एक ब्राउज़र गोटो लोकलहोस्ट / प्रोजेक्टफ़ोल्डर खोलें फिर यह काम करना शुरू करता है।


यह उत्तर पूर्ण नहीं है।
विलियम ड्यूने

हाय विलियम ड्यूनी, क्या इस में याद आ रही थी मुझे कि मैं अपने जवाब में सुधार कर सकते हैं ताकि जाना जाता चलो ..
सुनील केवी

1
आप मान रहे हैं कि उसके पास पहले से ही XAMPP पहले से स्थापित है, जो मूल प्रश्न में नहीं बताया गया है, और यदि आप कुछ नया स्थापित करने का सुझाव दे रहे हैं, तो यह आम तौर पर समझाने का एक अच्छा विचार है, और त्रुटि के पीछे का कारण - विशेष रूप से भविष्य में इसे पढ़ने वाले लोगों के लिए।
विलियम ड्यूने
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.