कर्ल सीओआरएस नियमों को लागू नहीं करता है। वे नियम सुरक्षा उद्देश्यों के लिए ब्राउज़र द्वारा लागू किए जाते हैं।

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

FYI करें, CORS - क्रॉस ओरिजिनल रिसोर्स शेयरिंग। चूंकि आपका एपीआई इसका समर्थन नहीं करता है, इसलिए आपके पास दो विकल्प हैं -

1. 4chan के API को एक्सेस करने के लिए उसी डोमेन पर प्रॉक्सी सर्वर का उपयोग करें जिस पर आपका वेबपेज है या,
2. किसी अन्य डोमेन पर प्रॉक्सी सर्वर का उपयोग करें, लेकिन आवश्यक शीर्षलेख शामिल करने के लिए प्रतिक्रिया को संशोधित करें।

मैं इस मुद्दे को "कोई मुद्दा नहीं" के रूप में बंद करने के लिए मतदान करना चाहता हूं।

सुझाव के लिए धन्यवाद। मैंने प्रॉक्सी के माध्यम से अनुरोध को रूट करने के लिए अपना कोड अपडेट किया है:

axios.get('https://a.4cdn.org/a/threads.json', {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {
      host: '104.236.174.88',
      port: 3128
    }
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

हालांकि, मुझे अभी भी यह त्रुटि मिल रही है:

क्रॉस-ओरिजिन अनुरोध अवरोधित: समान मूल नीति https://a.4cdn.org/a/threads.json पर दूरस्थ संसाधन को पढ़ने की अनुमति नहीं देती है

मैंने स्टैक ओवरफ्लो पर विभिन्न मंचों और प्रश्नों के माध्यम से खोज की है और मुझे इसका कोई समाधान नहीं मिल रहा है। अगर कोई कुछ अंतर्दृष्टि प्रदान कर सकता है तो इसकी सराहना की जाएगी।

इस पर कोई भी समाचार? मैं काफी हद तक एक ही नाव में हूं...

क्रॉस-ओरिजिन अनुरोध अवरोधित: समान मूल नीति https://a.4cdn.org/a/threads.json पर दूरस्थ संसाधन को पढ़ने की अनुमति नहीं देती है

ऐसा इसलिए है क्योंकि https://a.4cdn.org और https://boards.4chan.org को अलग-अलग डोमेन माना जाता है। अंतर एक और बोर्डों में है

मुझे भी यही मुद्दा मिल रहा है। क्या कोई इस पर मेरी मदद कर सकता है

साआमे

एक अस्थायी समाधान के रूप में आप इसका उपयोग कर सकते हैं: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

मुझे अभी के लिए कुछ भी बेहतर नहीं मिला ..

@PetitBateau मुझे यकीन नहीं है कि क्रोम एक्सटेंशन axios के माध्यम से अनुरोध भेजने में कैसे मदद करेगा।

@ adl1995 इसने मेरे लिए चाल

क्रोम एक्सटेंशन केवल उन लोगों के लिए मदद करता है जिनके पास एक्सटेंशन है। उत्पादन में क्रोम एक्सटेंशन के आधार पर एक अच्छा विचार नहीं है, क्योंकि हर किसी के पास वह एक्सटेंशन नहीं होता है।

इसलिए मैंने कहा कि यह एक अस्थायी समाधान है। और निश्चित रूप से एक देव पर्यावरण के लिए।

एक्सेस-कंट्रोल-अनुमति-उत्पत्ति एक प्रतिक्रिया शीर्षलेख है, अनुरोध शीर्षलेख नहीं:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

axios.get(url, {headers: {'Access-Control-Allow-Origin': *} } ) का कोई मतलब नहीं है!

प्रयत्न
axios.get(url, { crossdomain: true })

@ronnin रिकॉर्ड के लिए, मैंने आपके समाधान की कोशिश की, लेकिन यह काम नहीं करता है।

जिस दूरस्थ सेवा से आप अपना AJAX अनुरोध कर रहे हैं, वह आपके डोमेन से क्रॉस ओरिजिन AJAX अनुरोधों को स्वीकार नहीं करती है। यदि आपके पास अपनी वेबसाइट सर्वर-साइड कोडबेस तक पहुंच है, तो एक चीज आप कर सकते हैं, वहां एक नियंत्रक कार्रवाई बनाना है (मान लीजिए कि आप एक एमवीसी का उपयोग कर रहे हैं) और फिर रिमोट सेवा का उपभोग करने के लिए इसका इस्तेमाल करें। फिर आप अपने नियंत्रक कार्रवाई के लिए AJAX अनुरोध कर सकते हैं। इस दृष्टिकोण के लिए एक बोनस यह है कि आप दूरस्थ सेवा से संपर्क करने से पहले अतिरिक्त जांच चला सकते हैं, इसकी प्रतिक्रिया स्वरूपित कर सकते हैं और इसे कैशिंग भी कर सकते हैं।

इसे पढ़ें, सब लोग।
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

मुझे हमेशा उस एमडीएन दस्तावेज़ का संदर्भ मिलता है जो बहुत उपयोगी नहीं है। यह एक लंबा दस्तावेज है और यह सीधे प्रश्न को संबोधित नहीं करता है। यदि मेरे पास सर्वर साइड कोडबेस तक पहुंच नहीं है और मैं इस एपीआई का उपयोग करना चाहता हूं तो मैं क्या करूं?

मेरा समाधान किसी भी विदेशी एपीआई तक पहुंचने के लिए अपने डोमेन सर्वर पर अपना स्वयं का एपीआई बनाना है जो क्रॉस-मूल अनुरोधों की अनुमति नहीं देता है, मैं इसे अपना पुनरावर्तक एपीआई कहता हूं।

@JigzPalillo क्या आप दृष्टिकोण या कोड साझा कर सकते हैं? मैं काफी फंस गया हूँ! :(

आम तौर पर यह काम करेगा, लेकिन अगर ऐसा नहीं होता है और आपके पास उस डोमेन तक कोई पहुंच नहीं है ...

axios.get('https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

मैंने जो किया वह मेरे सर्वर पर पुनरावर्तक बना रहा था

axios.get('https://www.mydomain.com/repeater.php?url=https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

/* repeater.php */
function collect_data($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //remove on upload
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_VERBOSE, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_AUTOREFERER, false);
    curl_setopt($ch, CURLOPT_REFERER, "https://www.notmydomain.com");
    curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    $result = curl_exec($ch);
    echo curl_error($ch);
    curl_close($ch);
return($result);
}
echo collect_data($_GET["url"]);

सर्वर को विकल्प कॉल पर CORS हेडर के साथ प्रतिक्रिया करने की आवश्यकता है। यदि आप नोडज/एक्सप्रेस का उपयोग कर रहे हैं, तो आप इसे सभी समापन बिंदुओं के साथ ठीक कर सकते हैं:

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

लेकिन यह थोड़ा ढीला है। शायद उत्पादन के लिए कसना चाहते हैं।

हालांकि मैंने उस समस्या को लंबे समय से हल किया है। सर्वर एक 3p सेवा से संबंधित है और इसलिए मेरे नियंत्रण से बाहर है। मैंने इसके बजाय बस इसे प्रॉक्सी किया। उस मोर्चे पर सब ठीक है।

धन्यवाद

@steveswork वही है, सर्वर एक 3p सेवा से संबंधित है, बहुत दुख की बात है कि मैं AJAX, request.js का उपयोग कर सकता हूं लेकिन axios नहीं जो मैं पसंद करता हूं

@adl1995 क्या अभी तक इस समस्या को ठीक करने में सक्षम हैं? मैं पूरी तरह से भ्रमित हूं कि इस त्रुटि को कैसे संभालना है

अब 2018 है, क्या कोई अपडेट है?

@ चैलेंजर 532 नहीं, फिर भी नहीं।

त्रुटि अभी भी प्रचलित है।

मेरी सलाह: एक अलग पुस्तकालय का प्रयोग करें।

ठीक है, इस तरह मेरी समस्या हल हो गई। आप देखिए, मैं vuejs और Laravel के साथ काम कर रहा हूँ... मैंने अपना Laravel वेब रूट php में निम्नानुसार सेट किया है:

Route::get('distancematrix/{source}/{destination}', function($source,$destination){
 $url = "https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=$source&destinations=$destination&key=YOUR_API_KEY";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_PROXYPORT, 3128);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
curl_close($ch);

return json_decode($response, true);
});

फिर vuejs फ़ाइल मैंने अपने मार्ग पर अनुरोध भेजने के लिए बस axios का उपयोग किया:

axios.get("distancematrix/place_id:${this.place.source}/place_id:${this.place.destination}").then(response => {
                    console.log('====================================')
                    console.log(response.data)
                    console.log('====================================')
   })

और वोइला, यह ठीक काम करता है।

यदि लारवेल का उपयोग करें, तो अतिरिक्त कार्य:

हेडर ('पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति: *');

वापसी से पहले नियंत्रक या मार्ग के लिए
उदाहरण:
Route::get('post',function(){ $jav = Blog::all(); header('Access-Control-Allow-Origin: *'); return $jav; });
मेरी अंग्रेजी के लिए खेद है। आशा है इससे आपको सहायता मिलेगी।

मैं अपने एपीआई के लिए vue.js (लोकलहोस्ट पोर्ट 8080) और फ्लास्क का उपयोग करता हूं (लोकलहोस्ट पोर्ट 5000)

मुझे बस अपने एपीआई कोड (पोर्ट 5000 पर फ्लास्क) में छोटा बदलाव करना पड़ा।
मैंने फ्लास्क एक्सटेंशन फ्लास्क-सीओआरएस जोड़ा और इसका उपयोग करने के लिए अपना कोड संशोधित किया।
पहले:

from flask import Flask, request
import json
app = Flask(__name__)

बाद में:

from flask import Flask, request
import json
from flask_cors import CORS
app = Flask(__name__)
CORS(app)

इसके बाद इसने काम किया और मैं अपने एपीआई का उपयोग कर सकता था।
तो यह वास्तव में axios मुद्दा नहीं है, लेकिन API समस्या है और आपको फ़ायरफ़ॉक्स से axios.get फ़ंक्शन को कॉल करने से नहीं चेतावनी मिलती है।

हेडर और प्रॉक्सी विकल्प सेट करके, मुझे इसके बजाय Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. ।

लेकिन मैं इस एक्सटेंशन के साथ इसे प्राप्त करने में सक्षम था: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=hi ।

अफसोस की बात है कि यह कल ही काम किया और आज नहीं... मैं यह जानने की कोशिश कर रहा हूं कि आखिर क्यों

विकास मोड में _cors_ से बचने के लिए वेबपैक देव सर्वर का उपयोग करके प्रॉक्सी अनुरोध

अपनी webpack.config फ़ाइल में जोड़ें

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://my-target.com',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

उपरोक्त उदाहरण अनुरोध को प्रॉक्सी करेगा
axios.post(/api/posts/1 ... . . . .
से https://my-target.com/posts/1

उपरोक्त गिट उदाहरण, आपको अपने अनुरोध में

axios.get('/api/a/threads.json', {
    headers: {
           //  if u have some headers like this
       //  'Authorization': ' Basic //////some values'
    },
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

webpack.config फाइल में.......

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

संशोधित वेबपैक कॉन्फ़िगरेशन प्रॉक्सी आपके अनुरोध को इस तरह बदल देगा ..

u can see this in chrome dev tool REQUEST HEADERS
https://a.4cdn.org/a/threads.json 

आप इस तरह devServer प्रॉक्सी में कई पथों का उपयोग कर सकते हैं
webpack.config फाइल में.......

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/login": {
    "target": 'https://github.com', // for example
    "pathRewrite": { '^/login': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/post": {
    "target": 'https://facebook.com', // for example
    "pathRewrite": { '^/post': '' },
    "changeOrigin": true
    }
  }
}

यदि आपको आवश्यकता हो तो उपयोग करें

    "changeOrigin": true,
    "secure": false

मैंने इसे ठीक करने में घंटों बिताए और ऐसा लगता है कि हर जगह कोई मदद नहीं है। अनुमति-नियंत्रण-अनुमति-उत्पत्ति* नामक क्रोम एक्सटेंशन जोड़ने का सरल और तेज़ तरीका है। https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=hi

केवल आपकी मदद करेगा, लेकिन अन्य लोगों के बारे में कैसे?

किसी तरह उपयोगी: https://github.com/shalvah/cors-escape

Vue और axios की कोशिश कर रहा है, मुझे स्पष्ट रूप से एक ही मुद्दा मिला है।

सुंदर 6445 द्वारा प्रदान किए गए समाधान की कोशिश की और यह पूरी तरह से काम करता है।
मेरे द्वारा संशोधित वेबपैक कॉन्फ़िग फ़ाइल में है/config/index.js. में संदर्भित होने के बाद से मैंने इसे संशोधित करना पसंद किया/बिल्ड/webpack.dev.conf.js

इसमें आप पाते हैं

module.exports = {
  dev: { 
...
proxyTable: {},

जैसा कि सुंदर द्वारा वर्णित है, प्रॉक्सीटेबल को उदाहरण के लिए कुछ इस तरह बदलें

proxyTable: ({
      '/events': {
        "target": 'http://localhost:3000',
        "changeOrigin": true,
        "secure": false
      }
    }),

जिसका अर्थ है कि /ईवेंट से शुरू होने वाली हर चीज को http://localhost : 3000/events पर रूट किया जाएगा। मेरे मामले में कोई 'पथरीराइट' नहीं, सापेक्ष यूआरएल वही होगा।

और निश्चित रूप से, अपने Vue घटक से पूरा URL निकालना न भूलें। मैं था:

  mounted () {
    axios.get('http://localhost:3000/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

यह बनता है:

  mounted () {
    axios.get('/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

और यह पूरी तरह से अच्छा काम करता है। @सुंदर6445 . को धन्यवाद

उम्मीद है ये मदद करेगा

मुझे पता है कि यह बंद के रूप में चिह्नित है, लेकिन मैं कुछ बताना चाहता था। कभी-कभी यह त्रुटि क्लाइंट साइड पर दिखाई देगी यदि आपकी एपीआई कुंजी या तो समाप्त हो गई है या किसी और द्वारा उपयोग की जा रही है।

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

Axios के अंदर crossDomain जैसा कोई विकल्प नहीं है। कृपया गलत सुराग देने/उपयोग करने से पहले स्रोत-कोड का अध्ययन करें।

आप किसी अन्य साइट से जानकारी प्राप्त करने के लिए क्लाइंट पर (सीओआरएस को अक्षम किए बिना और आपको एक्सएसएस के लिए लक्ष्य बनाए बिना) जावास्क्रिप्ट निष्पादित नहीं कर सकते ।

यह आपको क्लाइंट के ब्राउज़र तक पहुंच प्राप्त करने और संभावित रूप से उनके बैंक खातों को समाप्त करने या उनकी अनुमति के बिना किसी साइट पर पोस्ट करने से रोकने के लिए है। वही स्क्रैपिंग साइटों के लिए जाता है (जो अनिवार्य रूप से ऑप करने की कोशिश कर रहा है)।

आप एक CORS मॉड्यूल वाले सर्वर और उस सर्वर के माध्यम से प्रॉक्सी का उपयोग करके वेब (यानी, डेटा प्राप्त करें) को स्क्रैप

मुझे लगता है कि यह हेडर कॉन्फ़िगरेशन इस मुद्दे को हल करेगा।

headers: { 'content-type': 'application/x-www-form-urlencoded' }

धन्यवाद

मुझे पता है कि यह क्लिच लगता है, लेकिन इस समस्या का मेरा समाधान इस कॉल को संभालने के लिए एक कस्टम एपीआई बना रहा है।

समस्या अक्ष के साथ नहीं है। समस्या सर्वर के साथ है। जब आप डेटा परोसते हैं तो आपको इसे भेजने से पहले निम्नलिखित शीर्षलेख जोड़ना होगा।

एक्सेस-कंट्रोल-अनुमति-उत्पत्ति को * पर सेट किया जाना चाहिए

एक्सेस-कंट्रोल-अनुमति-शीर्षलेख मूल, एक्स-अनुरोधित-साथ, सामग्री-प्रकार, स्वीकार करने के लिए सेट होना चाहिए

स्रोत: axios.get कॉल करते समय CORS त्रुटि

इन उत्तरों का जिक्र करते हुए, मैंने उन पंक्तियों को अपने बैकएंड एक्सप्रेस सर्वर में जोड़ा, जैसे:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8080"); //My frontend APP domain
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});`

स्रोत: एक्सप्रेसजेएस पर कॉर्स

और सब कुछ मेरे लिए ठीक काम करता है, बिना किसी अतिरिक्त कॉन्फ़िगरेशन के axios या फ्रंटएंड में, इसलिए यह वास्तव में axios समस्या नहीं है बल्कि सर्वर साइड हेडर कॉन्फ़िगरेशन की कमी है।

अंत में, मुझे लगता है कि स्टैक ओवरफ्लो पर यह अन्य

CORS प्रीफ्लाइट से कैसे बचें
"नो एक्सेस-कंट्रोल-अनुमति-उत्पत्ति हेडर" समस्याओं को हल करने के लिए CORS प्रॉक्सी का उपयोग कैसे करें
"पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति शीर्षलेख वाइल्डकार्ड नहीं होना चाहिए" समस्याओं को कैसे ठीक करें

आशा है कि इससे सहायता मिलेगी।

यदि आप किसी तृतीय पक्ष एपीआई या यूआरएल से डेटा प्राप्त करना चाहते हैं जिसमें इसके सीओआरएस हेडर के साथ कोई समस्या है (गायब या एकाधिक मान शामिल हैं) मुझे लगता है कि इसका एकमात्र समाधान इस लिंक का उपयोग करना है
" https://cors-anywhere.herokuapp.com/ "
मैं छोटी परियोजनाओं के लिए लिंक का उपयोग करता हूं लेकिन बड़ी परियोजनाओं के लिए आप कॉल को संभालने और एपीआई बनाने के लिए अपनी खुद की एपीआई बनाना चाहते हैं, आप ओपन सोर्स प्रोजेक्ट का उपयोग कर सकते हैं https://github.com/Rob--W/cors-anywhere / ।

यह काम करेगा:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

मैं कुछ समय पहले 4webm और 4chan-list-webm . बनाते समय इस समस्या से टकरा गया था

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

क्रॉसडोमेन: सच

मुझे बैकएंड सीओआरएस पर पोर्ट '8080' को सक्षम करना पड़ा और फिर यह काम कर गया।

सुरक्षित

बेहतर समझ के लिए वेबपैक प्रलेखन: https://webpack.js.org/configuration/dev-server/#devserver -proxy

यदि आप अपने बैकएंड एपीआई के लिए लार्वा या लुमेन का उपयोग कर रहे हैं। और आप पहले से ही barryvdh/laravel-cors पैकेज का उपयोग कर रहे हैं। समाधान यह है कि आप अपने cors.php कॉन्फिगर को हेडर, मेथड और ओरिजिनल पार्ट के रूप में सेट करें
'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'],
उम्मीद है कि यह किसी के मुद्दे को हल करता है

यदि आप इसे सफारी में करते हैं तो इसमें कोई समय नहीं लगता है, बस प्राथमिकताएं >> उन्नत से डेवलपर मेनू को सक्षम करें, और विकास मेनू से "क्रॉस-ओरिजिन प्रतिबंध अक्षम करें" चुनें। यदि आप केवल स्थानीय चाहते हैं, तो आपको केवल डेवलपर मेनू को सक्षम करना होगा, और विकास मेनू से "स्थानीय फ़ाइल प्रतिबंध अक्षम करें" का चयन करना होगा।

और OSX के लिए Chrome में टर्मिनल खोलें और चलाएं:

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

--user-data-dir OSX पर Chrome 49+ पर आवश्यक है

लिनक्स चलाने के लिए:

$ google-chrome --disable-web-security
इसके अलावा यदि आप AJAX या JSON जैसे देव उद्देश्यों के लिए स्थानीय फ़ाइलों तक पहुँचने का प्रयास कर रहे हैं, तो आप इस ध्वज का भी उपयोग कर सकते हैं।

-–allow-file-access-from-files
विंडोज के लिए कमांड प्रॉम्प्ट में जाएं और उस फोल्डर में जाएं जहां Chrome.exe है और टाइप करें

chrome.exe --disable-web-security
यह उसी मूल नीति को अक्षम कर देना चाहिए और आपको स्थानीय फाइलों तक पहुंचने की अनुमति देनी चाहिए।

ऊपर वर्णित सभी समाधानों का प्रयास किया। कुछ भी काम नहीं करता है।
अंत में एक मिल गया - https://github.com/expressjs/cors
मुझे आशा है कि यह आप लोगों की मदद करेगा

मुख्य मुद्दा सर्वर अनुरोधों और क्लाइंट अनुरोधों के बीच का अंतर है।

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

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

यही कारण है कि ब्राउज़र क्रॉस ओरिजिन अनुरोधों के बारे में सख्त हैं, विशेष रूप से जब आपका सार्वजनिक कोड क्लाइंट पर होता है, तो आपके पास इस पर कम नियंत्रण होता है कि कौन इसे देखता है / कौन इसमें हेरफेर कर सकता है। इस मामले में कि आपके फ़्रंटएंड एप्लिकेशन से छेड़छाड़ की गई है और कुछ दुर्भावनापूर्ण सॉफ़्टवेयर आपके आगंतुकों/उपयोगकर्ताओं की कीमत पर आपके कोड को नेटवर्क कॉल ऑफ करने में सक्षम हैं, वे यह सुनिश्चित करना चाहते हैं कि ऐसा नहीं हो सकता है। इसलिए, आपका mydomain.com allyourdataarebelongtome.com पर केवल तभी कॉल नहीं कर सकता जब तक कि आप ऐसा नहीं करना चाहते थे।

यहां समाधान यह नहीं है कि क्रॉस डोमेन अनुरोध काम नहीं कर रहे हैं - यह है कि या तो आपका स्वयं का सर्वर इसे रोक रहा है और आपको अपने मूल डोमेन को स्वीकार करने में इस परिस्थिति को समायोजित करने की आवश्यकता है, या उस तीसरे पक्ष के सर्वर को जिसे आप एपीआई कॉल करने का प्रयास कर रहे हैं। उस क्रॉस डोमेन अनुरोध के शीर्ष पर प्रमाणीकरण/प्राधिकरण की कोई अन्य विधि है।

@mddanishyusuf समाधान ने मेरे लिए काम किया।

मुझे लगता है कि यह हेडर कॉन्फ़िगरेशन इस मुद्दे को हल करेगा।

headers: { 'content-type': 'application/x-www-form-urlencoded' }

धन्यवाद

धन्यवाद! ;)

यहाँ से: https://github.com/axios/axios मैंने महसूस किया है कि वे axios url अनुरोध के लिए पूर्ण url नहीं डालते हैं।

इसलिए मैंने अपनी साइट पर अपना स्वयं का एपीआई बनाकर इसे हल करने का प्रयास किया। मैंने अभी इस तरह अनुरोध भेजा है

axios.get('/sample/request')

फिर http://127.0.0.1 :8080/sample/request https://a.4cdn.org/ पर एक और अनुरोध भेजेगा और axios को json के रूप में प्रतिक्रिया देगा।

यह मेरे लिए काम है, आशा है कि यह आपकी मदद कर सकता है

https://github.com/axios/axios/issues/853#issuecomment -408218917 ने fetch API और एक .NET 4.5 वेब API के साथ काम किया।

जैसा कि मैं समझता हूं कि समस्या यह है कि अनुरोध loclahost: 3000 से loclahost: 8080 पर भेजा जाता है और ब्राउज़र CORS जैसे अनुरोधों को अस्वीकार कर देता है। तो समाधान प्रॉक्सी बनाना था और ब्राउज़र अनुरोधों को संभाल लेगा क्योंकि वे एक सर्वर से चले गए हैं।
यदि मैं गलत हूं तो मुझे सही करों

मेरा समाधान था:
'http-प्रॉक्सी-मिडलवेयर' से प्रॉक्सी आयात करें
app.use ('/ api/**', प्रॉक्सी ({लक्ष्य: "http://localhost:8080"}));

मैं एक ही समस्या के साथ था और मैं इसे अपने बैकएंड (एक्सप्रेस) में 'कॉर्स' स्थापित करने का समाधान करता हूं।

Daud:
एनपीएम कोर्स स्थापित करें

फिर बस इसे सेट करें:

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

धन्यवाद के @fernandoruch, यह मेरा NodeJS सर्वर के साथ काम कर रहा है

मुझे एक ही समस्या थी और इसे हल किया

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

पहले तो काम किया, लेकिन फिर यह बंद हो गया और मैं समझ नहीं पाया कि क्यों।

तब मुझे एहसास हुआ कि मैंने अपना सारा कोड दूसरी फाइल में स्थानांतरित कर दिया है, इसलिए मुझे राउटर का उपयोग करने की आवश्यकता है:

router.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

नमस्ते,

इस मुद्दे पर कोई भी अपडेट, मैं .net core 2.1 और axios 0.18.0 का उपयोग कर रहा हूं।

धन्यवाद।

मुझे नहीं लगता कि समस्या अक्ष में है, समस्या आपके बैक-एंड सर्वर में है।

मेरे लिए मेरे पास बैक-एंड पर फ्लास्क के साथ एक आर्किटेक्चर है और Vue.JS में axios का उपयोग कर रहा है, केवल एक चीज जो मुझे अपने फ्लास्क सर्वर पर करनी थी वह है:

...
from flask_cors import CORS
...
CORS(app)

यह उत्पादन के लिए नहीं जाना चाहिए, हालांकि, आपके पास nginx स्तर पर एक क्रॉस मूल अनुमति सूची भी हो सकती है। मैं के माध्यम से पढ़ने के लिए इस , उपयोगी हो सकता है।

एक अस्थायी समाधान के रूप में आप इसका उपयोग कर सकते हैं: https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

मुझे अभी के लिए कुछ भी बेहतर नहीं मिला ..

बुरा विचार

मैं इस मुद्दे में भाग गया जब मैंने डार्कस्की मौसम एपीआई के लिए केवल axios.get() अनुरोध करने का प्रयास किया। जब मैंने डार्कस्की के अक्सर पूछे जाने वाले प्रश्न पृष्ठ के माध्यम से पढ़ा, तो मुझे इसी सटीक समस्या के बारे में एक प्रश्न मिला, उन्होंने यह कहकर उत्तर दिया कि उन्होंने अपनी जानकारी तक अनपेक्षित दुर्भावनापूर्ण पहुंच को रोकने के लिए सुरक्षा उपाय के रूप में इसका इस्तेमाल किया और अपने डेटाबेस तक पहुंचने के लिए प्रॉक्सी बनाने का सुझाव दिया।

मैंने अपनी package.json फ़ाइल में निम्नलिखित परिवर्तन किए हैं (मैं create-react-app का उपयोग कर रहा हूं):

{
  "proxy": "https://api.darksky.net/forecast/[myKey]
}

myKey मुझे उनके डेटा तक पहुंचने के लिए डार्कस्की द्वारा प्रदान किया गया था।

यह एक सुपर सरल फिक्स था और मेरे लिए काम किया! मुझे संदेह होगा कि कई एपीआई सेवाएं सुरक्षा उपाय के रूप में इसका इस्तेमाल शुरू करने जा रही हैं। उम्मीद है कि मेरा समाधान इसी तरह के मुद्दों के साथ दूसरों की मदद कर सकता है।

संक्षेप में: एक प्रॉक्सी बनाएं।

धन्यवाद @fernandoruch । यह मेरे लिए काम करता है जब मैं इसे अपने नोड.जेएस सर्वर के ऐप.जेएस में जोड़ता हूं

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

import axios from 'axios'
import jsonpAdapter from 'axios-jsonp'

axios.get(`${url}`, { adapter: jsonpAdapter })
        .then(result => {
            console.log('Status Code: ' + result.status)
        })
        .catch(error => console.log('Request failed'))

JSONP (JSON with Padding या JSON-P) का उपयोग क्लाइंट से भिन्न डोमेन में रहने वाले सर्वर से डेटा का अनुरोध करने के लिए किया जाता है। JSONP समान-मूल नीति को छोड़कर डेटा साझा करने में सक्षम बनाता है।

मैं बाहरी एपीआई कॉल के लिए सिर्फ jQuery के $.get का उपयोग करता हूं।

यदि आप किसी तृतीय पक्ष एपीआई या यूआरएल से डेटा प्राप्त करना चाहते हैं जिसमें इसके सीओआरएस हेडर के साथ कोई समस्या है (गायब या एकाधिक मान शामिल हैं) मुझे लगता है कि इसका एकमात्र समाधान इस लिंक का उपयोग करना है
" https://cors-anywhere.herokuapp.com/ "
मैं छोटी परियोजनाओं के लिए लिंक का उपयोग करता हूं लेकिन बड़ी परियोजनाओं के लिए आप कॉल को संभालने और एपीआई बनाने के लिए अपनी खुद की एपीआई बनाना चाहते हैं, आप ओपन सोर्स प्रोजेक्ट का उपयोग कर सकते हैं https://github.com/Rob--W/cors-anywhere / ।

यह काम करेगा:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

@yasincidem - आप इस सुझाव के लिए एक पूर्ण हीरा हैं। चीयर्स - मैंने समाधान की तलाश में पूरे वेब पर कई ट्रेल्स का अनुसरण किया है और आपका पहला है जिसने मेरे विशेष परिदृश्य के लिए काम किया है।

मैं अभी इस मुद्दे को पार कर आया हूं। मेरे पास इस विशेष तृतीय पक्ष एपीआई के काम करने के लिए {withCredentials: true} (मेरे अन्य एपीआई से एक कॉपी और पेस्ट) था, मैंने बस {withCredentials: true} को हटा दिया था

यह समाधान मेरे लिए काम करता है

axios.get(myurl, {
    crossDomain: true
}).then(res => { 
    console.log(res);
}).catch(error => {
    console.log('error', error);
})

संदर्भ https://stackoverflow.com/questions/42422494/cross-domain-at-axios

यदि आप किसी तृतीय पक्ष एपीआई या यूआरएल से डेटा प्राप्त करना चाहते हैं जिसमें इसके सीओआरएस हेडर के साथ कोई समस्या है (गायब या एकाधिक मान शामिल हैं) मुझे लगता है कि इसका एकमात्र समाधान इस लिंक का उपयोग करना है
" https://cors-anywhere.herokuapp.com/ "
मैं छोटी परियोजनाओं के लिए लिंक का उपयोग करता हूं लेकिन बड़ी परियोजनाओं के लिए आप कॉल को संभालने और एपीआई बनाने के लिए अपनी खुद की एपीआई बनाना चाहते हैं, आप ओपन सोर्स प्रोजेक्ट का उपयोग कर सकते हैं https://github.com/Rob--W/cors-anywhere / ।

यह काम करेगा:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

असाधारण यह काम करता है !!!

Axios . पर स्विच करते समय हमें इस समस्या का भी सामना करना पड़ा
हमारा सेटअप वेबपैक + devServer (प्रॉक्सी के साथ) + axios है

समस्या यह थी कि हमने केवल '/ api' के बजाय axios में बेसयूआरएल के रूप में हमारे पूर्ण एपीआई यूआरएल का इस्तेमाल किया था (प्रॉक्सी लक्ष्य विशेषता के माध्यम से मैपिंग करता है)

मेरी राय में यह हमारी अपनी गलतियों के कारण हो सकता है। मुझे ऊपर की तरह ही समस्या का सामना करना पड़ रहा है। 2 दिन मैंने इस समस्या को देखने के लिए समय लिया। यह पता चला है कि यह सिर्फ एक छोटी सी समस्या है जो मुझे मिली। मेरे द्वारा दर्ज किया गया url पता पार्स दस्तावेज़ीकरण के अनुसार नहीं है। और अब axios मेरे कोणीय 7 . पर पूरी तरह से काम करता है

जांचें कि क्या फ्लास्क या अन्य सर्वर में CORS सक्षम है।
यह भी जांचें कि क्या सर्वर का पता सही है। मैं सिर्फ इसलिए फंस गया था क्योंकि मैं सर्वर का पोर्ट जोड़ना भूल गया था।
axios.get ('http://localhost:5000/jsonshow')
तब (प्रतिक्रिया => (यह सरणी = प्रतिक्रिया))

" लोकलहोस्ट: 3000 " को " http://localhost :300" में बदलें मेरे साथ ठीक काम करें (सुनिश्चित करें कि सर्वरसाइड पर कॉर्स सक्षम करें)

" लोकलहोस्ट: 3000 " को " http://localhost :300" में बदलें मेरे साथ ठीक काम करें (सुनिश्चित करें कि सर्वरसाइड पर कॉर्स सक्षम करें)

यदि आप पोर्ट 300 पर चल रहे हैं न कि 3000 पर।

VueJS आप प्रोजेक्ट की जड़ में vue.config.js नामक एक विले बना सकते हैं यदि यह अस्तित्व में नहीं है और कुछ ऐसा जोड़ें

module.exports = {
  devServer: {proxy: 'http://localhost:3000'}
}

फिर आपका Axios कॉल इस तरह दिखना चाहिए

axios.get('/api/say_hello', {})

यदि आप किसी तृतीय पक्ष एपीआई या यूआरएल से डेटा प्राप्त करना चाहते हैं जिसमें इसके सीओआरएस हेडर के साथ कोई समस्या है (गायब या एकाधिक मान शामिल हैं) मुझे लगता है कि इसका एकमात्र समाधान इस लिंक का उपयोग करना है
" https://cors-anywhere.herokuapp.com/ "
मैं छोटी परियोजनाओं के लिए लिंक का उपयोग करता हूं लेकिन बड़ी परियोजनाओं के लिए आप कॉल को संभालने और एपीआई बनाने के लिए अपनी खुद की एपीआई बनाना चाहते हैं, आप ओपन सोर्स प्रोजेक्ट का उपयोग कर सकते हैं https://github.com/Rob--W/cors-anywhere / ।

यह काम करेगा:

axios.get( ${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json )
तब (रेस => {
कंसोल.लॉग (रेस)
})

यह मेरे लिए काम किया! धन्यवाद!

इसको आजमाओ :

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

Vue.config.productionTip = false;

// ======================
axios.defaults.withCredentials = false;
axios.defaults.proxy = {
  host: 'http://localhost',
  port: 5000,
};
// ======================
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

यदि आप किसी तृतीय पक्ष एपीआई या यूआरएल से डेटा प्राप्त करना चाहते हैं जिसमें इसके सीओआरएस हेडर के साथ कोई समस्या है (गायब या एकाधिक मान शामिल हैं) मुझे लगता है कि इसका एकमात्र समाधान इस लिंक का उपयोग करना है
" https://cors-anywhere.herokuapp.com/ "
मैं छोटी परियोजनाओं के लिए लिंक का उपयोग करता हूं लेकिन बड़ी परियोजनाओं के लिए आप कॉल को संभालने और एपीआई बनाने के लिए अपनी खुद की एपीआई बनाना चाहते हैं, आप ओपन सोर्स प्रोजेक्ट का उपयोग कर सकते हैं https://github.com/Rob--W/cors-anywhere / ।

यह काम करेगा:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

मेरा समय बचा रहा है, बहुत-बहुत धन्यवाद!

@ronnin रिकॉर्ड के लिए, मैंने आपके समाधान की कोशिश की, लेकिन यह काम नहीं करता है।

क्या? सचमुच? मेरे लिए यह निश्चित रूप से काम किया ...
जीईटी विधि के लिए, एक आकर्षण की तरह काम करता है!

यहाँ एक उदाहरण है जिसे मैंने @ronnin टिप्पणी के आधार पर एक सार्वजनिक API का उपयोग करके बनाया है:
axios.get('https://world.openfoodfacts.org/api/v0/products', { crossdomain: true }) .then(function (response) { console.log(response.data); })

अब 2019 है, क्या कोई अपडेट है? मैं

मैं अपने ऐप को विकसित करने के लिए इस क्रोम एक्सटेंशन का उपयोग करता हूं
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

@ronnin रिकॉर्ड के लिए, मैंने आपके समाधान की कोशिश की, लेकिन यह काम नहीं करता है।

पुरुष, जो मुसीबत में हैं, वे CORS से अच्छी तरह परिचित नहीं हैं, और उन्हें पहले उल्लिखित लेख @ seungha-kim को पढ़ना चाहिए: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

सारांश के रूप में:

1. आपके द्वारा अनुरोध किए गए दूरस्थ संसाधन, यदि उसी होस्ट पर नहीं (तथाकथित: मूल) से अनुरोध करने पर, संसाधन के साथ अतिरिक्त CORS शीर्षलेख प्रदान करना चाहिए, उर्फ। एक्सेस कंट्रोल की अनुमति दें: होस्ट (मूल), हेडर, मेथड्स आदि।
2. ब्राउज़रों द्वारा अनुरोध करना या 'पहुंच-नियंत्रण-अनुरोध-विधि' हेडर के साथ कर्ल करना, विधि 'विकल्प' के साथ अनुरोध करना इच्छित विधि से पहले स्वचालित रूप से प्रयास किया जाएगा: 'GET', 'POST', आदि।
   जिसका अर्थ है कि दूरस्थ संसाधनों के संचालकों को विशेष रूप से 'विकल्प' विधि को संभालना चाहिए। उदाहरण के लिए (nginx):
   ``` ग्रूवी
   स्थान / दूरस्थ-संसाधन {
   अगर ($request_method = 'विकल्प') {
   add_header 'पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति' $http_origin;
   add_header 'पहुंच-नियंत्रण-अनुमति-शीर्षलेख' 'डीएनटी, कीप-अलाइव, उपयोगकर्ता-एजेंट, एक्स-अनुरोधित-साथ, अगर-संशोधित-चूंकि, कैश-कंट्रोल, सामग्री-प्रकार, प्राधिकरण';
   add_header 'पहुंच-नियंत्रण-अनुमति-तरीके' 'विकल्प, प्राप्त करें, पोस्ट करें, पुट करें, पैच करें, हटाएं';
   add_header 'पहुंच-नियंत्रण-अनुमति दें-प्रमाण-पत्र' सत्य;
   add_header 'पहुंच-नियंत्रण-अधिकतम-आयु' 1728000; # 20डी

    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
   return 204;
  }
 // more ...

}
```

1. जैसा कि ऊपर उल्लेख किया गया है, मैंने प्रत्येक एक्सेस-कंट्रोल-अनुमति-* हेडर के लिए मूल्य * का उपयोग नहीं किया।
   मूल्य *, कई प्रतिबंध हैं।
   ए। मान * एक्सेस-कंट्रोल-अनुमति-उत्पत्ति, एक्सेस-कंट्रोल-अनुमति-शीर्षलेख, एक्सेस-कंट्रोल-अनुमति-विधियां एक्सेस-कंट्रोल-अनुमति-प्रमाण-पत्र = सत्य के साथ काम नहीं कर सकती हैं। यदि अनुरोध के साथ कुकी की आवश्यकता है, तो आपको एक्सेस-कंट्रोल-अनुमति-क्रेडेंशियल्स = सत्य की आवश्यकता होगी
   बी। केवल * मान्य है, *.google.com अमान्य है

1. एक्सेस-कंट्रोल-अनुमति-शीर्षलेख संभवतः आपके अनुरोध के शीर्षलेखों की एक सूची है। कुछ हेडर का अस्तित्व जो इसमें सूचीबद्ध नहीं है, आपको ब्लॉक कर देगा। बस हेडर को एक्सेस-कंट्रोल-अनुमति-हेडर में जांचें और चुनें

2. समस्या ज्यादातर क्लाइंट (ब्राउज़र, आपका क्लाइंट ऐप) में नहीं है, लेकिन सर्वर में स्थित संसाधन का अनुरोध किया गया है।

3. अपने सर्वर-साइड देव साथी से बात करें

आशा है कि यह मददगार है

@ronnin : अगर मैं आपके बिंदुओं से सही ढंग से समझता हूं, तो इसका मतलब है कि अगर मेरा जीईटी अनुरोध कुछ सर्वर से संसाधन का अनुरोध कर रहा है, जो उन्होंने सीओआरएस को सक्षम नहीं किया है, मूल रूप से ऐसा कुछ भी नहीं है जो हम फ्रंट एंड से कर सकते हैं?

@ronnin : अगर मैं आपके बिंदुओं से सही ढंग से समझता हूं, तो इसका मतलब है कि अगर मेरा जीईटी अनुरोध कुछ सर्वर से संसाधन का अनुरोध कर रहा है, जो उन्होंने सीओआरएस को सक्षम नहीं किया है, मूल रूप से ऐसा कुछ भी नहीं है जो हम फ्रंट एंड से कर सकते हैं?

अपने अनुरोधों को काम करने के लिए नीचे दिए गए ऐप का उपयोग करें

सर्वर ने CORS . को सक्षम नहीं किया , भले ही इसने मेरे लिए काम किया

https://cors-anywhere.herokuapp.com/

उपयोग:

यूआरएल = https://cors-anywhere.herokuapp.com${url} ;
`

@ronnin : अगर मैं आपके बिंदुओं से सही ढंग से समझता हूं, तो इसका मतलब है कि अगर मेरा जीईटी अनुरोध कुछ सर्वर से संसाधन का अनुरोध कर रहा है, जो उन्होंने सीओआरएस को सक्षम नहीं किया है, मूल रूप से ऐसा कुछ भी नहीं है जो हम फ्रंट एंड से कर सकते हैं?

अगर मेरा जीईटी अनुरोध कुछ सर्वर से संसाधन का अनुरोध कर रहा है, जिसे उन्होंने सीओआरएस सक्षम नहीं किया है, मूल रूप से हम कुछ भी नहीं है जो हम सीधे एक्सएचआर अनुरोध (उर्फ। AJAX अनुरोध) के माध्यम से कर सकते हैं। हां!
यह ब्राउज़र है जो प्रोटोकॉल का पालन करता है और आपके अनुरोध को अस्वीकार करता है।
लेकिन, आप पारंपरिक ब्राउज़र अनुरोध द्वारा संसाधन प्राप्त कर सकते हैं, जैसे कि location.href, iframe, form.action

अधिकतर, हम एक स्व-स्वयं का रिवर्स प्रॉक्सी सर्वर (जैसे nginx) सेट करते हैं, जिसमें CORS सक्षम किए बिना 3-rd संसाधन का अनुरोध करने वाली समस्या को हल करने के लिए स्व-नियंत्रित सर्वर पक्ष होता है।
हेरोकू ऐप,

हमारे पास सेल्फ़-ड्राइविंग कार और AI हैं लेकिन फिर भी CORS . से जूझ रहे हैं

मैं प्रॉक्सी के रूप में उसकेोकू का उपयोग करके इसे हल करने में कामयाब रहा।

यहाँ मेरा कोड है;

fetch("https://cors-anywhere.herokuapp.com/boards.4chan.org/biz/thread/13932651.json")
           .then(res => { //returns a readable stream
                  res.body.getReader().read().then(r => { //returns a Uint8 buffer array
                       var result = new TextDecoder("utf-8").decode(r.value); //Decodes the buffer array into a string
                           console.log(JSON.parse(result)) //the result you want
                   })
            })

अभी 2020 है, क्या कोई अपडेट है? मैं

पुष्टि कर सकते हैं, इसकी 2020 और अभी भी कोई अपडेट नहीं है।
fetch() में mode: 'no-cors' मोड है, क्यों axios में कुछ समान नहीं है?

मैंने कोशिश की

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

और उन हेडर में से किसी ने भी काम नहीं किया। मैंने सच्चे और झूठे दोनों राज्यों पर withCredentials की कोशिश की, काम नहीं किया।

लाने के साथ, यह सिर्फ काम करता है।

यदि मैं CORS नीति से निपटना नहीं चाहता और अभी भी अक्ष का उपयोग नहीं करना चाहता, तो मुझे क्या करना चाहिए?
संपादित करें: इसके अलावा, यह मुद्दा क्यों बंद है? हमें स्पष्ट रूप से अभी भी इससे समस्या है।

आपको 'पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति' को परिभाषित करने की आवश्यकता है: 'YOUR_IP:YOUR_PORT' प्रतिक्रिया शीर्षलेखों में अनुरोध शीर्षलेखों में नहीं।

पुष्टि कर सकते हैं, इसकी 2020 और अभी भी कोई अपडेट नहीं है।
fetch() में mode: 'no-cors' मोड है, क्यों axios में कुछ समान नहीं है?

मैंने कोशिश की

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

और उन हेडर में से किसी ने भी काम नहीं किया। मैंने सच्चे और झूठे दोनों राज्यों पर withCredentials की कोशिश की, काम नहीं किया।

लाने के साथ, यह सिर्फ काम करता है।

यदि मैं CORS नीति से निपटना नहीं चाहता और अभी भी अक्ष का उपयोग नहीं करना चाहता, तो मुझे क्या करना चाहिए?
संपादित करें: इसके अलावा, यह मुद्दा क्यों बंद है? हमें स्पष्ट रूप से अभी भी इससे समस्या है।

अक्ष के साथ कोई समस्या नहीं है, इसलिए मुद्दा बंद कर दिया गया था। बस एक कुर्सी पर बैठें और एमडीएन पर लेख पढ़ें: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

मैं

धन्यवाद दोस्तों, इससे मदद मिली! असुविधा के लिए मुझे क्षमा करें!

जब मैं अपने डिवाइस मोबाइल हॉटस्पॉट पर था तो मुझे यह त्रुटि axios पर हुई थी। फिर जब मैंने कॉफी शॉप में वाईफाई का इस्तेमाल किया तो मुझे CORB नहीं मिला

मैंने विकिपीडिया एपीआई का उपयोग करने की कोशिश की और यह वही मुद्दा था।
URL में origin=* जोड़ने से यह ठीक हो गया।

const endpoint = `https://en.wikipedia.org/w/api.php?action=query&origin=*&list=search&srsearch=${searchTerm}&format=json`;

मैंने इसे axios का उपयोग न करके हल किया, बाहरी URL से $ajax और $get के साथ GET की कोशिश की, पुराने jQuery सामान के साथ कोई समस्या नहीं थी। यह सुनिश्चित करने के लिए एक बग है।

अभी 2021 है, क्या कोई अपडेट है? मैं

एक्सियोस (0.18.0) और क्रोम (75.0.3770.100) से जैपियर वेबहुक हिट करने का प्रयास करते समय मुझे एक समान "एक्सेस-कंट्रोल-अनुमति-हेडर" -संबंधित समस्या का सामना करना पड़ रहा है।

मेरा अनुरोध है:

axios.post("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { email });

मुझे असमर्थित शीर्षलेख के बारे में एक त्रुटि प्राप्त होगी:

CORS नीति द्वारा अवरुद्ध: अनुरोध शीर्षलेख फ़ील्ड सामग्री-प्रकार की अनुमति नहीं है Access-Control-Allow-Headers द्वारा प्रीफ़्लाइट प्रतिक्रिया में

इस पृष्ठ को पढ़ने के बाद, मेरी समझ है:

• 1. जैपियर को कम से कम "सामग्री-प्रकार" के लिए एक्सेस-कंट्रोल-अनुरोध-हेडर का समर्थन करने के लिए अपने सर्वर प्रतिक्रिया को कॉन्फ़िगर करने की आवश्यकता है
• 1. प्रीफ्लाइट ऑप्ट के दौरान किसी भी तरह "सामग्री-प्रकार" हेडर-चेक को बाहर करने के लिए मुझे अपने अनुरोध को कॉन्फ़िगर करने की आवश्यकता है।

क्या विकल्प 2 प्राप्त करने के लिए कोई सुझाव हैं? एक्सेस-कंट्रोल-अनुरोध-शीर्षलेख के बारे में जैपियर की

संपादित करें: मुझे विश्वास है कि इसका axios के साथ बहुत कम/कुछ नहीं है, बल्कि Zapier के अंत में खराब समर्थन है। यूआरएल पैराम्स के साथ जीईटी पर स्विच करने के बाद अनुरोध काम करता प्रतीत होता है।

ठीक है अगर अक्सर पूछे जाने वाले प्रश्नों में वे उल्लेख करते हैं कि आपको किसी सामग्री प्रकार के पैरामीटर की आवश्यकता नहीं है
बस ol . की कोशिश कर सकता है
Var xhr = new XMLHTTPRequest() और इसे बिना किसी अक्ष के इस तरह से आजमाएं।

क्या आपकी पोस्ट क्लाइंट या सर्वर पर वेबहुक पर है?

मंगलवार, जून २५, २०१९, ३:२७ अपराह्न पीट शमित्ज़ नोटिफिकेशन @github.com ने लिखा:

मैं एक समान "पहुंच-नियंत्रण-अनुमति-शीर्षलेख" -संबंधित समस्या का सामना कर रहा हूं
एक्सियोस (0.18.0) और क्रोम से जैपियर वेबहुक को हिट करने का प्रयास करते समय
(75.0.3770.100)।

मेरा अनुरोध है:

axios.post ("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { ईमेल });

मुझे असमर्थित शीर्षलेख के बारे में एक त्रुटि प्राप्त होगी:

CORS नीति द्वारा अवरुद्ध: अनुरोध शीर्ष लेख फ़ील्ड सामग्री-प्रकार की अनुमति नहीं है
पूर्व-उड़ान प्रतिक्रिया में एक्सेस-कंट्रोल-अनुमति-शीर्षलेख द्वारा

[छवि: छवि]
https://user-images.githubusercontent.com/3190970/60138000-9ccdda80-975d-11e9-8f6d-e47bcffe91f1.png

इस पृष्ठ को पढ़ने के बाद, मेरी समझ है:

-
1. जैपियर को समर्थन के लिए अपने सर्वर प्रतिक्रिया को कॉन्फ़िगर करने की आवश्यकता है
कम से कम "सामग्री-प्रकार" के लिए एक्सेस-कंट्रोल-अनुरोध-शीर्षलेख
-
1. मुझे अपने अनुरोध को किसी भी तरह से बाहर करने के लिए कॉन्फ़िगर करने की आवश्यकता है
प्रीफ्लाइट ऑप्ट के दौरान "कंटेंट-टाइप" हेडर-चेक।

क्या विकल्प 2 प्राप्त करने के लिए कोई सुझाव हैं? जैपियर की आम समस्याएं
एक्सेस-कंट्रोल-अनुरोध-शीर्षलेख के बारे में
https://zapier.com/help/common-problems-webhooks/#posting-json-from-web-browser-access-control-allow-headers-in-preflight-response-error
आपके अनुरोध के "सामग्री-प्रकार को अनुकूलित न करें" का सुझाव देता है। हालांकि, मैं
मेरे अनुरोध में कोई शीर्षलेख विकल्प नहीं है, न ही कोई डिफ़ॉल्ट शीर्षलेख
axios के लिए कॉन्फ़िगर किया गया है, इसलिए मैं केवल यह मान सकता हूं कि यह axios के अंत में निहित है?

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/axios/axios/issues/853?email_source=notifications&email_token=AHVHGUIDC6DW3YPEKZ2HHZTP4KLWHA5CNFSM4DIVKOX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW6012PLODNMVY-50K
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe-auth/AHVHGUKX32PVCFPCZGRURD3P4KLWHANCNFSM4DIVKOXQ
.

इस पर कोई भी समाचार? मैं काफी हद तक एक ही नाव में हूं।

@imranimu समस्या उस ब्राउज़र का संयोजन है जिसका आप उपयोग कर रहे हैं और जिस सर्वर से आप अनुरोध कर रहे हैं। इसके बारे में axios कुछ भी नहीं कर सकता है, जब तक कि ब्राउज़र एक एपीआई को उजागर नहीं करता है जो इसे CORS चेक को अनदेखा करता है।

आपके पास कुछ विकल्प हैं:

यदि आप उस सर्वर को नियंत्रित करते हैं जिसका आप अनुरोध कर रहे हैं, तो उसे निम्नलिखित शीर्षलेखों के साथ सभी OPTIONS अनुरोधों का जवाब देने की अनुमति दें:

Access-Control-Allow-Origin: https://www.mywebsite.com <<REPLACE WITH YOUR SITE - USE COMMA IF MORE THAN ONE>>
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Access-Control-Allow-Origin

एक्सप्रेस के साथ यह कुछ इस तरह दिख सकता है, जिसे आपकी मिडलवेयर श्रृंखला में अन्य मार्गों से पहले रखा गया है:

app.options('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');
    res.send(HttpStatusCode.OK);
});

आपको प्रतिक्रिया में शीर्षलेख Access-Control-Allow-Origin: https://www.mywebsite.com' <<replace with your website or list of sites>> भी जोड़ना होगा।

app.get('/my-cors-friendly-route', async (req, res, next) => {
   const data = await this.http.get('https://www.someothersite.com');
   res.append('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
   res.json(data)
});

सीधे शब्दों में कहें, ब्राउज़र जानता है कि जब आप एक अलग मूल (डोमेन) पर संसाधन का अनुरोध कर रहे हैं, तो यह यह देखने के लिए कि क्या सर्वर कहता है कि यह ठीक है, यह देखने के लिए एक प्रीफलाइट चेक भेजता है (विकल्प अनुरोध विधि प्रकार का उपयोग करके, प्राप्त करें, पोस्ट आदि नहीं)। अनुरोध प्राप्त करने के लिए। यह आपके एपीआई का उपयोग करके किसी तृतीय पक्ष वेबसाइट की संभावना को कम करने के लिए एक बुनियादी ब्राउज़र सुरक्षा उपाय है - जो आप नहीं चाहते हैं। उपरोक्त कोड मूल रूप से सिर्फ इतना कहता है कि किसी विशिष्ट वेबसाइट के लिए एपीआई का उपभोग करना ठीक है। यदि इसका उपयोग सभी वेबसाइटों द्वारा किया जा सकता है, तो आप Access-Control-Origin: * सेट करेंगे।

वैकल्पिक रूप से, यदि आप उस सर्वर को नियंत्रित नहीं करते हैं जिसके लिए आप अनुरोध कर रहे हैं, तो उस सर्वर पर एक मार्ग का पर्दाफाश करें जो पृष्ठ की सेवा कर रहा है, जो आपके लिए अनुरोध (प्रॉक्सी) करता है। यह काम करता है क्योंकि उजागर मार्ग का मूल (डोमेन) आपके आवेदन के समान है, इसलिए CORS नीति लागू नहीं की गई है, और जिस सर्वर से आपने मार्ग का खुलासा किया है वह ब्राउज़र नहीं है, इसलिए उसे CORS त्रुटि नहीं मिलेगी।

@ Aitchy13 जिस API सर्वर से मैं कनेक्ट कर रहा हूं, उसके पास Access-Control-Origin: * , कंसोल मुझे इस समस्या की तरह यह त्रुटि देता है,

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘https://<my_api_host>/Data/Login/’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

आप भी कहते हैं, जोड़ने के लिए ...

res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');

... लेकिन Access-Control-Allow-Origin केवल प्रतिक्रियाओं के लिए नहीं अनुरोध नहीं है?

समर्थित नहीं है अगर Access-Control-Allow-Origin : * ... बहुत अजीब है।

भविष्य के संभावित समाधानों में सहायता के लिए कुछ संदर्भों के लिए एपीआई के कुछ प्रतिक्रिया शीर्षलेख यहां दिए गए हैं:

(यह वास्तविक अनुरोध से पहले OPTIONS विधि अनुरोध बंद है जो CORS के कारण अस्वीकृत हो जाता है)
प्रतिक्रिया शीर्षलेख

HTTP/1.1 204 No Content
Date: Fri, 28 Jun 2022 04:08:58 GMT
Server: Apache
X-DNS-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Surrogate-Control: no-store
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Headers: api-key,content-type

Vary: Access-Control-Request-Headers
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive

या मुझमें कुछ गलत है? इस मुद्दे पर मेरे लैपटॉप को आधे में स्नैप करने वाला था।

मुझे एक ही समस्या थी, कई प्रयासों के बाद, कुछ समाधानों का परीक्षण, कोई भी काम नहीं किया। package.json में प्रॉक्सी सेट करने के बाद ही।
जोड़ता है:
"प्रॉक्सी": "एपीआई एड्रेस"
कि यह कोर को बायपास करेगा।

@IkarosFeitosa क्या आप अपनी कॉन्फ़िगरेशन प्रॉक्सी कॉन्फ़िगरेशन पोस्ट कर सकते हैं?

जब सर्वर Access-Control-Allow-Origin: * साथ प्रतिक्रिया करता है तो @zacharytyhacz आप ब्राउज़र क्रेडेंशियल नहीं भेज सकते।

दोनों में से एक:

1. विशिष्ट वेबसाइट पता होने के लिए * बदलें।
2. आपके द्वारा उपयोग किए जा रहे axios अनुरोध फ़ंक्शन के कॉन्फ़िगरेशन/विकल्प पैरामीटर में ...withCredentials: false सेट करें।
3. आपके द्वारा उपयोग किए जा रहे axios अनुरोध फ़ंक्शन के कॉन्फ़िगरेशन/विकल्प पैरामीटर में प्रॉक्सी प्रॉपर्टी को मान्य प्रॉक्सी पर सेट करें (नीचे उदाहरण)

proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }

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

मैं इस त्रुटि टिप को भ्रमित कर रहा हूँ:

CORS वेब ब्राउज़र की सीमा होनी चाहिए, इसे सर्वर रिटर्न की अनुमति चाहिए, मैं पहले से ही इस कोर्स की अनुमति देता हूं, लेकिन फिर ब्राउज़र ने मुझे No 'Access-Control-Allow-Origin' header is present on the requested resource ।

मैं एपीआई लाने के साथ अपने सर्वर कॉर्स कॉन्फ़िगरेशन की कोशिश करता हूं, यह अच्छी तरह से काम करता है।

यदि आप एक्सप्रेस के साथ नोडज का उपयोग कर वह पोस्ट आपकी मदद कर सकती है।

यदि आप उदाहरण के लिए अनुमत cors के साथ केवल कुछ पथ चाहते हैं:
/home/fridge - अन्य मूल से अनुमति नहीं है
/home/toilet - अन्य मूल से अनुमति दी जानी चाहिए

आप निम्नलिखित कार्यान्वयन का प्रयास कर सकते हैं (मेरे लिए काम किया)

मार्गों/home.js . में

const express = require('express')
const router  = express.Router()

router.options("/toilet", function(req, res, next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.send(200);
});

यदि आप एक्सप्रेस के साथ नोडज का उपयोग नहीं करते हैं - OPTIONS विधि अनुरोध के लिए गुगल करने का प्रयास करें

एक्सप्रेस से परीक्षण किया गया: 4.16.3

नहीं, :) विकास करते समय यह समस्या है (हम http का उपयोग करते हैं)
जब हम सर्वर पर रिलीज करते हैं (हम https का उपयोग करते हैं)
यह नहीं हुआ।
तो बस ऐड ऑन इंस्टॉल करें :

app.use (फ़ंक्शन (req, res, अगला) {
res.header ('पहुँच-नियंत्रण-अनुमति दें-उत्पत्ति', '*');
res.header ('पहुंच-नियंत्रण-अनुमति दें-शीर्षलेख', 'मूल, एक्स-अनुरोधित-साथ, सामग्री-प्रकार, स्वीकार करें');
अगला();
});

यह मेरी जिंदगी का हल है !!

सुझाव के लिए धन्यवाद। मैंने प्रॉक्सी के माध्यम से अनुरोध को रूट करने के लिए अपना कोड अपडेट किया है:

axios.get('https://a.4cdn.org/a/threads.json', {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  proxy: {
    host: '104.236.174.88',
    port: 3128
  }
  }).then(function (response) {
      console.log('response is : ' + response.data);
  }).catch(function (error) {
      if (error.response) {
        console.log(error.response.headers);
      } 
      else if (error.request) {
        console.log(error.request);
      } 
      else {
        console.log(error.message);
      }
  console.log(error.config);
});

हालांकि, मुझे अभी भी यह त्रुटि मिल रही है:

क्रॉस-ओरिजिन अनुरोध अवरोधित: समान मूल नीति https://a.4cdn.org/a/threads.json पर दूरस्थ संसाधन को पढ़ने की अनुमति नहीं देती है https://boards.4chan.org ' से मेल नहीं खाता)।

मैंने स्टैक ओवरफ्लो पर विभिन्न मंचों और प्रश्नों के माध्यम से खोज की है और मुझे इसका कोई समाधान नहीं मिल रहा है। अगर कोई कुछ अंतर्दृष्टि प्रदान कर सकता है तो इसकी सराहना की जाएगी।

हैलो दोस्तों, एक्सिस कॉल से पहले इसे आजमाएं, यह मेरे लिए काम कर गया है

headers.set('Content-Type', 'application/json')

यह मेरा समाधान था

const key = 'sdmhfkhskdfhkshdkfhsdhfksl';
    const locationUrl = `https://api.fjdsghfjsdghfjgshdjfg`;
    axios.defaults.headers.common['x-api-key'] = key;
    const myresult = await axios.get(locationUrl, { crossdomain: true }).then((result) => {
        return result.data;
    });

मैं इस CORS समस्या को ठीक करने के तरीके पर एक वीडियो बनाऊंगा। मैं इस टिप्पणी को अपने YouTube वीडियो के लिंक के साथ अपडेट करूंगा।

संपादित करें:
https://youtu.be/hxyp_LkKDdk

अभी 2021 है, क्या कोई अपडेट है? मैं

हाँ, मैं अपनी गंदगी में इतना हूँ कि मुझे वास्तव में उस वर्ष की जाँच करनी थी

सर्वर का कॉर्स पहले काम करता है या नहीं, यह जांचने के लिए बस fetch का उपयोग करें।

और...

axios मेरे koa-server अनुरोध कर सकता है, लेकिन सीधे iris , दोनों ही लोकप्रिय कोर्स-मिडलवेयर हैं।

१३५८

इस समस्या का कोई आधिकारिक समाधान क्यों नहीं है? मैंने इस पूरे सूत्र को पढ़ा और एक सार्वभौमिक समस्या की तरह प्रतीत होता है कि कोई भी वास्तव में किसी भी मानक तरीके से हल नहीं कर रहा है।

इस समस्या का कोई आधिकारिक समाधान क्यों नहीं है? मैंने इस पूरे सूत्र को पढ़ा और एक सार्वभौमिक समस्या की तरह प्रतीत होता है कि कोई भी वास्तव में किसी भी मानक तरीके से हल नहीं कर रहा है।

संपूर्ण CORS मुद्दा Axios नहीं है, न ही स्वयं जावास्क्रिप्ट का। यह अधिकांश या सभी ब्राउज़रों में निर्मित एक सुरक्षा विशेषता है। इसके चारों ओर 'हैक' करने के तरीके हैं, लेकिन यह सर्वर पर निर्भर है कि वह सही हेडर के साथ प्रतिक्रिया करे।

इस समस्या का कोई आधिकारिक समाधान क्यों नहीं है? मैंने इस पूरे सूत्र को पढ़ा और एक सार्वभौमिक समस्या की तरह प्रतीत होता है कि कोई भी वास्तव में किसी भी मानक तरीके से हल नहीं कर रहा है।

संपूर्ण CORS मुद्दा Axios नहीं है, न ही स्वयं जावास्क्रिप्ट का। यह अधिकांश या सभी ब्राउज़रों में निर्मित एक सुरक्षा विशेषता है। इसके चारों ओर 'हैक' करने के तरीके हैं, लेकिन यह सर्वर पर निर्भर है कि वह सही हेडर के साथ प्रतिक्रिया करे।

तो उस प्रतिक्रिया को देखते हुए, सीओआरएस मुद्दे के लिए एक फिक्स को लागू करने का सबसे "सफल" तरीका क्या है?

ठीक है, दो दिनों के शोध के बाद मुझे आखिरकार यह मिल गया।

कड़ाई से बोलते हुए, यह एक स्वयंसिद्ध मुद्दा नहीं है। वास्तव में इसे एक मुद्दा भी नहीं माना जाना चाहिए। axios को सभी अजीब और कष्टप्रद CORS मानकों का पालन करने के लिए डिज़ाइन किया गया था, इसलिए संदेश: CORS header ‘Access-Control-Allow-Origin’ missing होने की उम्मीद है, थार axios का सही कार्य है। उदाहरण में 4chan api के साथ, जैसा कि पहले कहा गया था, समस्या axios नहीं है, 4chan api ही है जो CORS मानकों का पालन नहीं कर रहा है।

कुछ लोगों ने हेडर सत्यापन से बचने के लिए प्रॉक्सी का उपयोग करने की पुरानी चाल का सुझाव दिया है। यहाँ नेगर जमालीफ़र्ड का एक ब्लॉग है जिसमें बताया गया है कि ट्रिक कैसे करें: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 वैसे , मुझे यकीन नहीं है कि क्या इसे एक बुरा अभ्यास माना जा सकता है।

मेरे मामले में मैं अपने स्वयं के स्थानीयहोस्ट में एएसपी नेट कोर एपीआई से कनेक्ट करने का प्रयास कर रहा था जब तक कि मैं अपने अनुरोध को भेजने से पहले, अपने अनुरोध को भेजने से पहले, स्वचालित रूप से "प्रीफ्लाइट अनुरोध" भेज रहा था, जो एक विकल्प विधि के रूप में प्रेषण है जो मेरा सर्वर था संभालने को तैयार नहीं है। अगर कोई ऐसा व्यक्ति है जो क्रोम और फ़ायरफ़ॉक्स को इतना अस्पष्ट संदेश प्रदर्शित करने के लिए दोषी ठहराता है।

कुछ लोगों ने हेडर सत्यापन से बचने के लिए प्रॉक्सी का उपयोग करने की पुरानी चाल का सुझाव दिया है। यहाँ नेगर जमालीफ़र्ड का एक ब्लॉग है जिसमें बताया गया है कि ट्रिक कैसे करें: https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 वैसे , मुझे यकीन नहीं है कि क्या इसे एक बुरा अभ्यास माना जा सकता है।

तो इन कॉलों के लिए सिर्फ प्रॉक्सी करना सबसे अच्छा संभव मामला है? कि एक शर्म की बात है।

तो इन कॉलों के लिए सिर्फ प्रॉक्सी करना सबसे अच्छा संभव मामला है? कि एक शर्म की बात है।

ठीक है ... आप उस दोस्त से बात करने का भी प्रयास कर सकते हैं जो आप का उपभोग करने की कोशिश कर रहे एपीआई बनाते हैं और उन्हें इसे ठीक करने के लिए कहते हैं।

मैंने समस्या हल कर ली है:
अक्ष के लिए: url = " http://localhost : 8080" विधि = 'पोस्ट'
मेरे Django सर्वर प्रतिक्रिया के लिए:
uesrItem = {'उपयोगकर्ता': 'xxx'}
प्रतिक्रिया = JsonResponse (userItem)
प्रतिक्रिया ["पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति"] = " http://localhost :8080"
प्रतिक्रिया ["पहुंच-नियंत्रण-अनुमति दें-प्रमाण-पत्र"] = 'सत्य'
प्रतिक्रिया ["पहुंच-नियंत्रण-अनुमति दें-तरीके"] = "पोस्ट, विकल्प"

समस्या axios नहीं है, लेकिन आप जिस एपीआई का अनुरोध कर रहे हैं!

उदाहरण के लिए मुझे फ्लास्क में एक एपीआई कोडित किया गया था और जीईटी विधि थी:

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    return make_response(jsonify(drivers_json), 201)

लेकिन जब मैं एपीआई प्रतिक्रिया में हेडर जोड़ता हूं तो समस्या हल हो गई थी:

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    response = jsonify(drivers_json)
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

फिर मैं अपनी अक्षीय प्रतिक्रिया लॉग करता हूं और मुझे यह मिलता है:

{data: Array(4), status: 200, statusText: "OK", headers: {…}, config: {…}, …}

मैं नहीं जानता कि आप सभी किस एपीआई का उपयोग कर रहे हैं लेकिन फ्लास्क में इसे हल किया गया था!

मेरे मामले में axios में कुछ भी गलत नहीं था। मैंने अभी उस व्यक्ति से पूछा जिसने एपीआई को सीओआरएस सर्वर-साइड सक्षम करने के लिए बनाया है।

ये कोशिश करें

delete axios.defaults.headers.common["X-Requested-With"];

मैंने https://github.com/Rob--W/cors-anywhere वर्कअराउंड का उपयोग किया है और ठीक काम करता है, लेकिन प्रोड में मैं उस व्यक्ति से पूछूंगा जिसने एपीआई को मेरे डोमेन के लिए cors सक्षम करने के लिए बनाया है

मुझे नहीं लगता कि आप CORS को सीधे axios में हल कर सकते हैं, क्योंकि CORS एक ब्राउज़र प्रतिबंध है जो आपके ब्राउज़र और लक्ष्य सर्वर के बीच है।

आप या तो यह कर सकते हैं:

1. अपने लक्षित सर्वर से अपने प्रतिक्रिया शीर्षलेखों में Access-Control-Allow-Origin शामिल करें।
2. अपने axios अनुरोध में होस्टनाम शामिल न करें, इसलिए यह आपके मूल सर्वर का अनुरोध करेगा। फिर अपने मूल सर्वर से आप लक्ष्य सर्वर के लिए जो चाहें कर सकते हैं।

कृपया एक विस्तृत उदाहरण कोड स्निपेट का उल्लेख करें।
वह मददगार होगा।

मैं अपने स्थानीय पर एक ही मुद्दा रख रहा था।
मैंने अपने बैकएंड पर cors जोड़े और हल किया। :)

यह axios साथ समस्या नहीं है यह बैकएंड के साथ समस्या है। मैं Django का उपयोग कर रहा हूँ। और इन दोनों को जोड़ने से समस्या का समाधान हो जाएगा।

कॉर्स मिडलवियर जोड़ें

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]

और CORS की अनुमति दे रहा है।
(सभी के लिए CORS की अनुमति)

CORS_ORIGIN_ALLOW_ALL = True

(यह थोड़ा असुरक्षित है क्योंकि यह सभी मूल की अनुमति देता है। जो इसे सीएसआरएफ हमलों के लिए कमजोर बना देगा)
इसलिए उत्पादन के लिए केवल विशिष्ट मूल के लिए अनुमति दें

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '<YOUR_DOMAIN>[:PORT]',
)

उदाहरण: +1:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8000',
)

नमस्ते,
जैसा कि उल्लेख किया गया है, यह समस्या क्रॉस-ओरिजिनल अनुरोधों के विरुद्ध एक ब्राउज़र सुरक्षा है। मैंने इन निर्देशों का पालन करते हुए इसे हल किया: https://support.google.com/chrome/thread/11089651?hl=hi

उन लोगों के लिए जो अभी भी संघर्ष कर रहे हैं:
उम्मीद है कि अब तक आप समझ गए होंगे कि यह Axios के साथ कोई समस्या नहीं है और सर्वर द्वारा हेडर सेट नहीं किए जाने के कारण ब्राउज़र CORS को ब्लॉक कर रहा है। यदि आप इसे समझते हैं और अभी भी अपने सर्वर में हेडर सेट नहीं करने में समस्या आ रही है, तो रिवर्स प्रॉक्सी का उपयोग करते समय एनजीआईएनएक्स में कैसे सेट करें, इसके लिए

उन लोगों के लिए जो अभी भी संघर्ष कर रहे हैं:
उम्मीद है कि अब तक आप समझ गए होंगे कि यह Axios के साथ कोई समस्या नहीं है और सर्वर द्वारा हेडर सेट नहीं किए जाने के कारण ब्राउज़र CORS को ब्लॉक कर रहा है। यदि आप इसे समझते हैं और अभी भी अपने सर्वर में हेडर सेट नहीं करने में समस्या आ रही है, तो रिवर्स प्रॉक्सी का उपयोग करते समय एनजीआईएनएक्स में कैसे सेट करें, इसके लिए

मैं 3 घंटे से संघर्ष कर रहा हूं, क्लाइंट साइड पर कुछ भी नहीं बदला, आखिरकार मैंने सर्वर पर निम्नलिखित सामान जोड़ा:

एग-कॉर्स स्थापित करें (केवल एग प्रोजेक्ट के लिए)

// ./config/config.default.js

config.cors = {
    origin: ["http://localhost:8080"],
    allowedHeaders: [
      "Content-Type",
      "Authorization",
      "Access-Control-Allow-Methods",
      "Access-Control-Request-Headers"
    ],
    credentials: true,
    enablePreflight: true
  };

बस इतना ही

const board = this.props.routeParams.tag;
axios.get('https://cors-anywhere.herokuapp.com/' + 'https://a.4cdn.org/' + board + '/threads.json', config)
.then(function (response) {
console.log(response.data);
});

सर्वर का कॉर्स पहले काम करता है या नहीं, यह जांचने के लिए बस fetch का उपयोग करें।

और...

axios मेरे koa-server अनुरोध कर सकता है, लेकिन सीधे iris , दोनों ही लोकप्रिय कोर्स-मिडलवेयर हैं।

१३५८

इसने मेरे लिए काम किया और यह जानने की जरूरत है कि क्यों

मैं टॉरनेडो और वुज के साथ काम कर रहा था, मेरे बैकएंड एड पर एक्सियोस समस्या नहीं थी:

# Tornado
class ClassName(tornado.web.RequestHandler):
    def set_default_headers(self):
        self.set_header("Content-Type", "application/json")
        self.set_header("Access-Control-Allow-Origin", "*")
        self.set_header("Access-Control-Allow-Headers", "content-type")
        self.set_header(
            'Access-Control-Allow-Methods',
            'POST, GET, OPTIONS, PATCH, PUT'
        )

@robertjchristian
यह काम किया है
धन्यवाद

मुझे भी वही समस्या हो रही है
मेरा कोड
अक्ष({
विधि: "प्राप्त करें",
url: "http://localhost:4000/उपयोगकर्ता",
})
तब (प्रतिक्रिया => {
कंसोल.लॉग (प्रतिक्रिया);
})
कैच (त्रुटि => {
कंसोल.लॉग (त्रुटि)
});
}
यह त्रुटि प्राप्त करना
' http://localhost :4000/users' मूल से ' http://localhost :3000' पर XMLHttpRequest तक पहुंच CORS नीति द्वारा अवरुद्ध कर दी गई है: प्रीफ्लाइट अनुरोध का जवाब एक्सेस कंट्रोल चेक पास नहीं करता है: नहीं 'एक्सेस-कंट्रोल' -Allow-Origin' हेडर अनुरोधित संसाधन पर मौजूद है।

क्या कोई मुझे कदम से कदम समाधान दे सकता है कि मुझे क्या करना चाहिए?

@albertpinto सबसे पहले आपको यह समझना चाहिए कि axios समस्या नहीं है, आप जिस "बैकएंड" का उपयोग कर रहे हैं वह बाहरी डेटा प्राप्त करने में सक्षम होना चाहिए। तो आप गूगल में सर्च कर सकते हैं। _enable cors की तरह कुछ (उस भाषा या ढांचे को रखें जिसका आप उपयोग कर रहे हैं) _

@albertpinto इस मेगा थ्रेड में सभी संभावित समाधानों को देखें। यह आपके अंत में क्लाइंट-साइड/फ्रंट-एंड मुद्दा नहीं है - यह वास्तव में सर्वर है (लोकलहोस्ट: 4000)। सर्वर को मूल की अनुमति देने के लिए CORS हेडर के साथ प्रतिक्रिया करने की आवश्यकता है।

उदाहरण के लिए, आपके सर्वर को हेडर के साथ जवाब देना चाहिए जैसे:

Access-Control-Allow-Origin:  *
Access-Control-Allow-Headers: Content-Type

मैंने इसे निम्नलिखित द्वारा हल किया:

1. cors npm स्थापित करें: npm cors इंस्टॉल करें (मेरे मामले में अपने बाकी नोड सर्वर पर http://localhost: 4000)

यह आपके अंतिम बिंदु पर भी जाता है:
var cors = आवश्यकता ('cors')
वर एक्सप्रेस = आवश्यकता ('एक्सप्रेस')
var cors = आवश्यकता ('cors')
वर ऐप = एक्सप्रेस ()
app.use(cors())

सभी सुझावों के लिए शुक्रिया!

// CORS के लिए, यदि आप एक्सप्रेस js का उपयोग करते हैं, तो आप बस npm के माध्यम से cors पैकेज का उपयोग कर सकते हैं।

app.use(
    cors({
        credentials: true,
        origin: [
            'http://localhost:8080',
            'http://your-production-website.com'
        ]
    }),
)

कर्ल सीओआरएस नियमों को लागू नहीं करता है। वे नियम सुरक्षा उद्देश्यों के लिए ब्राउज़र द्वारा लागू किए जाते हैं।

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

FYI करें, CORS - क्रॉस ओरिजिनल रिसोर्स शेयरिंग। चूंकि आपका एपीआई इसका समर्थन नहीं करता है, इसलिए आपके पास दो विकल्प हैं -

1. 4chan के API को एक्सेस करने के लिए उसी डोमेन पर प्रॉक्सी सर्वर का उपयोग करें जिस पर आपका वेबपेज है या,
2. किसी अन्य डोमेन पर प्रॉक्सी सर्वर का उपयोग करें, लेकिन आवश्यक शीर्षलेख शामिल करने के लिए प्रतिक्रिया को संशोधित करें।

मैं इस मुद्दे को "कोई मुद्दा नहीं" के रूप में बंद करने के लिए मतदान करना चाहता हूं।

@sunnykgupta
एक ही तर्क, एक ही शरीर, लेकिन दूरस्थ बैकएंड समापन बिंदु के लिए कोणीय http पोस्ट अनुरोध CORS ब्लॉक त्रुटि प्राप्त नहीं करता है

यदि आपके पास एक गो सर्वर चल रहा है, तो आपको गोरिल्ला का उपयोग करने का सुझाव दें

headersOk := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

err := http.ListenAndServe("localhost:8081", handlers.CORS(originsOk, headersOk, methodsOk)(r))

मैंने इसे निम्नलिखित द्वारा हल किया:

1.पैकेज.json के ठीक बगल में प्रोजेक्ट की जड़ में एक vue.config.js फ़ाइल बनाएँ, जिसमें:

module.exports = {
    devServer:{
        proxy: {
            '/apiv1': {
                target: 'https://fuping.site/',
                changeOrigin: true,
                pathRewrite: {
                    '^/apiv1': ''
                }
            },
        },
    }
}

2. इस तरह एक http अनुरोध करें:

this.$axios({
          method:'get',
          url:'apiv1/about/',

        }).then(function(response){
          console.log(response.data)
        }).catch(error=>{
          console.log(error)
        })

axios.get('https://a.4cdn.org/a/threads.json', {
शीर्षलेख: {
'पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति': '*',
'पहुंच-नियंत्रण-अनुमति दें-शीर्षलेख': 'सामग्री-प्रकार, प्राधिकरण',
},
प्रॉक्सी: {
होस्ट: '104.236.174.88',
पोर्ट: 3128
}
}).फिर (फ़ंक्शन (प्रतिक्रिया) {
कंसोल.लॉग ('प्रतिक्रिया है:' + प्रतिक्रिया। डेटा);
}).कैच (फ़ंक्शन (त्रुटि) {
अगर (त्रुटि। प्रतिक्रिया) {
कंसोल.लॉग (error.response.headers);
}
और अगर (त्रुटि। अनुरोध) {
कंसोल.लॉग (त्रुटि। अनुरोध);
}
अन्यथा {
कंसोल.लॉग (त्रुटि। संदेश);
}
कंसोल.लॉग (त्रुटि। कॉन्फिग);
});

सभी को नमस्कार,
मैं इसे अभी पोस्ट कर रहा हूं क्योंकि इसे हल करने में मुझे घंटों लग गए।

सबसे पहले, सीओआरएस निश्चित रूप से एक सर्वर-साइड समस्या है और क्लाइंट-साइड नहीं है, लेकिन मुझे यकीन है कि सर्वर कोड मेरे मामले में सही था क्योंकि अन्य ऐप्स अलग-अलग डोमेन पर एक ही सर्वर का उपयोग कर काम कर रहे थे। समस्या तब शुरू हुई जब मैंने अपने कस्टम इंस्टेंस के साथ axios का उपयोग करना शुरू किया।

मेरे मामले में, यह एक बहुत ही विशेष समस्या थी जब हम एक का उपयोग baseURL में axios उदाहरण और फिर बनाने की कोशिश GET या POST कहीं से कॉल, axios baseURL और अनुरोध URL के बीच एक स्लैश / axios जोड़ता है। यह भी समझ में आता है, लेकिन यह छिपी हुई समस्या थी। मेरा लारवेल सर्वर अनुगामी स्लैश को हटाने के लिए पुनर्निर्देशित कर रहा था जो इस समस्या का कारण बन रहा था।

सामान्य तौर पर, प्री-फ़्लाइट OPTIONS अनुरोध रीडायरेक्ट पसंद नहीं करता है। तो, निश्चित रूप से इसकी जांच करें और इससे बचें।

मुझे आशा है कि यह किसी की मदद कर सकता है, हालांकि इसमें से कोई भी बग नहीं है।