Axios: काम करने के लिए क्रॉस-साइट पोस्ट नहीं मिल सकता

इसके अलावा, मैं कॉन्फिगरेशन में withCredentials को true पर भी सेट कर रहा हूं।

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

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

यह मेरा विन्यास है:

const myApi = axios.create({
  baseURL: 'http://someUrl/someEndpoint',
  timeout: 10000,
  withCredentials: true,
  transformRequest: [(data) => JSON.stringify(data.data)],
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
});'

अगर मुझे मौका मिला तो मैं इस पर और गौर करने की कोशिश करूंगा।

ओह अच्छा मैं पागल नहीं हूँ। :) कृपया यदि संभव हो तो इस पर गौर करें।

पता चला कि मेरा मुद्दा एक्सियोस से असंबंधित था। सिस्को एनीकनेक्ट मेरी मशीन से विकल्प अनुरोधों को रोक रहा था ... क्योंकि कारण?

क्रॉस डोमेन अनुरोधों के लिए किसी अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता नहीं होती है। यह पुराने IE के लिए XDomainRequest का उपयोग करने के लिए वापस आ जाएगा। https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L22

क्या आप अधिक विवरण प्रदान कर सकते हैं? कौन सा ब्राउज़र, OS, axios का संस्करण, कोई त्रुटि संदेश।

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

सिस्को एनीकनेक्ट और संभवतः अन्य वीपीएन क्लाइंट के साथ स्थापित मैक पर क्रॉस साइट अनुरोध करके इसे पुन: प्रस्तुत किया जा सकता है।

मेरा पर्यावरण है:

• अक्ष 0.8.1
• एल कैपिटान
• क्रोम
• त्रुटि संदेश: "नहीं 'पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति' शीर्षलेख अनुरोधित संसाधन पर मौजूद है। उत्पत्ति ' http://localhost : 3000' इसलिए पहुंच की अनुमति नहीं है।"

ध्यान दें कि वही अनुरोध कर्ल के साथ काम करता है।

इस मामले की तलाश के लिए धन्यवाद!

सीओआरएस के साथ सर्वर से एक प्रीफ्लाइट अनुरोध किया जाता है ताकि यह देखा जा सके कि अनुरोध की अनुमति है या नहीं। आप अनुरोध है कि करने के लिए अपने सर्वर प्रतिक्रिया की आवश्यकता होगी OPTIONS अनुरोध के रूप में विधि की स्थापना द्वारा हैडर Acces-Control-Allow-Origin: * जो किसी भी मूल से अनुरोध की अनुमति देगा। वैकल्पिक रूप से आप केवल कुछ मूल के लिए अनुमति दे सकते हैं Acces-Control-Allow-Origin: http://example.com ।

हां मैं समझता हूं। लेकिन सर्वर मेरा नहीं है। मैं एक बास (बैकएंड-ए-ए-सर्विस) का उपयोग कर रहा हूं। और उन्होंने पहले ही मेरे डोमेन को अनुमत सूची में जोड़ दिया है। मैंने जाँच की है कि उक्त बास का उपयोग करने वाले अन्य लोगों को ऐसी कोई समस्या तो नहीं हुई है।

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

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

धन्यवाद

यहां शीर्षलेख हैं:

जब मैं अपने उपयोगकर्ता प्रोफ़ाइल को उनके API से प्राप्त करने के लिए axios का उपयोग करता हूं, तो GitHub से प्रतिक्रिया शीर्षलेख यहां दिए गए हैं:

आप देख सकते हैं कि GitHub Access-Control-Allow-Origin: * जोड़ता है। आपके Baas की प्रतिक्रिया में कोई भी Access-Control टाइप हेडर नहीं है।

मैं देख रहा हूँ मैं देख रहा हूँ। सुपर देर से उत्तर के लिए खेद है। मुझे इस पर थोड़ा और गौर करने दें। आपका बहुत बहुत धन्यवाद।

मुझे यकीन नहीं है कि मैं जो देख रहा हूं वह संबंधित है या नहीं। मूल रूप से, मैं अपने रिमोट सर्वर को एक प्रमाणीकरण अनुरोध भेज सकता हूं और एक कुकी वापस प्राप्त कर सकता हूं, लेकिन फिर सर्वर पर आने वाली कॉल _don't_ उनके साथ कुकीज़ भेजती हैं, जिसके परिणामस्वरूप एक त्रुटि होती है।

यहां POST कॉल से लॉगिन करने के लिए शीर्षलेख दिए गए हैं:

और अब एक फॉलोअप GET कॉल:

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

एक नई शिकन के रूप में; मैंने सीधे XHR का उपयोग करके एक अनुवर्ती GET कॉल का परीक्षण किया है, और कुकी को ठीक साथ भेजा जाता है। हालाँकि, Axios के माध्यम से एक ही कॉल करना, उसी समस्या का परिणाम है जिसका मैंने ऊपर उल्लेख किया है।

उह। कृपया अवहेलना करें - मैं एक्सियोस के माध्यम से अपेक्षित चीजों को नहीं भेज रहा था :)

मैं भी इसी मुद्दे का सामना कर रहा हूँ।
विकल्प कॉल के माध्यम से चला जाता है, लेकिन पोस्ट कॉल कोर में फंस जाता है।
http://stackoverflow.com/questions/36907693/axios-cors-issue-with-github-oauth-not-getting-access-token

इतना बड़ा मुद्दा कैसे सुलझाया नहीं गया?

+1

+1

+1

+1

+1

+1

+1

@dsacramon क्या समस्या है जो आप देख रहे हैं? ऐसा लगता है कि रिपोर्ट की जा रही अधिकांश समस्याएं सर्वर या झूठे अलार्म की समस्या हैं। यदि कोई प्रतिलिपि प्रस्तुत करने योग्य त्रुटि है जिसे मैं देख सकता हूं तो मुझे ठीक करने पर काम करने में खुशी होगी।

इसे भी प्राप्त करना

XMLHttpRequest https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish लोड नहीं कर सकता http://localhost : 3000' इसलिए पहुंच की अनुमति नहीं है।

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

यहां कुछ उदाहरण दिया गया है (दोनों ने https पर काम किया)

उदाहरण 1 - ठीक काम करता है

axios.get('https://randomuser.me/api/')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

उदाहरण 2 - काम नहीं कर रहा - त्रुटि दिखा रहा है?

axios.get('https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

यहाँ त्रुटि प्रतिक्रिया है

[object Error] {
  config: [object Object] {
    data: undefined,
    headers: [object Object] { ... },
    maxContentLength: -1,
    method: "get",
    timeout: 0,
    transformRequest: [object Object] { ... },
    transformResponse: [object Object] { ... },
    url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish",
    validateStatus: function validateStatus(status) {
      return status >= 200 && status < 300;
    },
    xsrfCookieName: "XSRF-TOKEN",
    xsrfHeaderName: "X-XSRF-TOKEN"
  },
  response: undefined
}

कुछ ऐसा जो प्रासंगिक हो सकता है ट्रांसफॉर्मेशन में है? मैं सोच रहा हूँ कि PROTECTION_PREFIX बिट का क्या अर्थ है?

[object Object] {
  0: function transformResponse(data) {
      /*eslint no-param-reassign:0*/
      if (typeof data === 'string') {
        data = data.replace(PROTECTION_PREFIX, '');
        try {
          data = JSON.parse(data);
        } catch (e) { /* Ignore */ }
      }
      return data;
    }
}

कोशिश करते हुए भी

मोड: 'नो-कॉर्स'
लाने में अभी भी यह त्रुटि देता है

मुझे यकीन है कि उत्तर बहुत सरल हैं और बस किसी प्रकार के शीर्षलेख की आवश्यकता है, बस यह सुनिश्चित नहीं है कि क्या खेलता रहेगा।

विकिपीडिया एपीआई सिर्फ एक भद्दा उदाहरण हो सकता है, दूसरों पर एक ही त्रुटि?

मैं इस कोड को हटाता हूं, काम कर सकता हूं: axios.defaults.withCredentials = true

मुझे jsonp . के साथ ठीक काम करने के लिए विकिपीडिया एपीआई मिला है

var jsonp = require('jsonp');

// search for 'frog'
jsonp('https://en.wikipedia.org/w/api.php?action=opensearch&search=frog&format=json', null, function (err, data) {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

कोई अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता नहीं है।

Axios के साथ एक ही त्रुटि प्राप्त करना। यहाँ मेरी प्रतिक्रिया घटक है:

import React, { Component } from 'react'
import axios from 'axios'

export default class User extends Component {
  constructor(props){
    super(props)

    // axios.defaults.withCredentials = true

    const config = {
    method: 'get',
    url: 'https://api.airbnb.com/v2/users/2917444?client_id=3092nxybyb0otqw18e8nh5nty&_format=v1_legacy_show',
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    responseType: 'json',
    withCredentials: true,
  }

    axios.request(config)
      .then(response => { console.log('response: ', response) });

  }

  render() {
    return (
      <div>User</div>
    )
  }
}

_नोट: मैं नोड अनुरोध के साथ एपीआई को पूरी तरह से ठीक कर सकता हूं।_

मैं उसी त्रुटि में भाग रहा हूं जो @Sinistralis है। मैक ओएसएक्स में क्रोम के नवीनतम संस्करण पर मुझे सीओआरएस अनुरोधों पर net::ERR_EMPTY_RESPONSE मिल रहा है जो ठीक से किए गए हैं (मेरा सर्वर विकल्प सहित सभी सीओआरएस शीर्षलेखों को ठीक से संभालता है)। यह अजीब है क्योंकि iOS10 सफारी पर, ठीक वही कोड बिना किसी समस्या के काम करता है। यह कैसे हल किया जा सकता है यह देखने के लिए अपने आप पर थोड़ा और जांच करने का प्रयास करेंगे।

क्रोम के नवीनतम संस्करण के साथ पुराने मैक (10.11) पर, मैं इस त्रुटि को ठीक उसी कोड के साथ पुन: उत्पन्न नहीं कर सकता। ये वाकई बहुत अजीब है. आप इस बहुत ही सरल ऐप पर जाकर पुन: पेश करने में सक्षम हो सकते हैं: http://lights.suyashkumar.com और कंसोल का निरीक्षण (कोड यहां है । कुछ मशीनों पर कोई त्रुटि नहीं होगी और यह आपको लॉगिन करने के लिए पुनर्निर्देशित करेगा। दूसरों पर यह रीडायरेक्ट नहीं करेगा और आपको मुख्य पृष्ठ पर छोड़ देगा।

मेरी त्रुटि का समाधान किया। मेरे लिए, आवेदन प्रारंभ पर शून्य मान के साथ config.headers में शीर्षलेख असाइन करने में यह एक समस्या थी (यह स्थानीय संग्रहण से एक मान खींचता है, और प्रारंभ में, कुछ भी नहीं है)। मान को रिक्त स्ट्रिंग के रूप में असाइन करना जब मान शून्य होता है तो समस्या हल हो जाती है। मुझे आश्चर्य है कि यह ऐसा कुछ है जो axios के भीतर संभाला जा सकता है या किया जाना चाहिए (सुनिश्चित नहीं है कि शून्य हेडर को xhr में पास करने में मूल्य है यदि यह _ कभी-कभी_ टूट जाता है)।

इसी तरह की समस्या वाले अन्य लोगों के लिए, मैंने पाया कि कुछ वीपीएन क्लाइंट विकल्प अनुरोधों को भी रोक सकते हैं ( यहां देखें)

भ्रामक CORS त्रुटि अभी भी अक्ष में है। इस समस्या को ठीक करने के लिए fetch पॉलीफ़िल mode: 'no-cors' का समर्थन करता है।

हमारे द्वारा संचालित अन्य वातावरणों में मशीनों के साथ-साथ विभिन्न बंदरगाहों पर एक ही मशीन पर अनुरोध करने के लिए हमें इस प्रकार के अनुरोध करने की आवश्यकता है!

@dreki कृपया आपके द्वारा उल्लिखित मुद्दे का विवरण प्रदान करें।

आप क्लाइंट-साइड पर कुछ नहीं कर सकते, जब सर्वर केवल आपके मूल से अनुरोध स्वीकार नहीं करता है। यदि आप कर सकते हैं, तो हमारे यहां एक बड़ी सुरक्षा रिसाव होगी (और "हम" के साथ मेरा मतलब संपूर्ण इंटरनेट है) ...

मुझे लगता है कि axios यहां पूरी तरह से अनुरूप कार्य करता है और प्रतिक्रिया करता है।

महत्वपूर्ण प्रतिक्रिया शीर्षलेख Access-Control-Allow-Origin जो मूल रूप से मान्य मूल सेट करता है, जिन्हें इस सर्वर-साइड सेवा को कॉल करने की अनुमति है। यदि आपका क्लाइंट इनमें से किसी भी कॉन्फ़िगर किए गए मूल से कॉल नहीं कर रहा है, तो इस तरह की कंसोल त्रुटि के साथ अनुरोध को अस्वीकार कर दिया जाएगा:

XMLHttpRequest http://localhost :8080/v1/api/search?q=candles लोड नहीं कर सकता। अनुरोधित संसाधन पर कोई 'पहुंच-नियंत्रण-अनुमति दें-उत्पत्ति' शीर्षलेख मौजूद नहीं है। उत्पत्ति ' http://localhost :9999' इसलिए एक्सेस की अनुमति नहीं है।

आप अतिथि सूची में नहीं हैं।

मेरी समस्या को ठीक किया।
localhost:3000 पर मेरे vue ऐप से localhost:8080 पर मेरी एक्सप्रेस एपीआई तक पहुंचने की कोशिश कर रहा था, लेकिन एक त्रुटि वापस मिल रही थी।
पता चला कि इसे काम करने के लिए आपको http:// जोड़ना होगा।
तो का उपयोग http://localhost:3000 के बजाय localhost:3000 जब देव परीक्षण कर।

मुझे विकिमीडिया एपीआई के साथ भी यही समस्या थी। उनके CORS पृष्ठ (https://www.mediawiki.org/wiki/Manual:$wgCrossSiteAJAXdomains) में देख रहे हैं मैंने अनुरोध में मूल = * जोड़ा और इसने समस्या को ठीक कर दिया।

axios.get('https://en.wikipedia.org/w/api.php?action=opensearch&format=json&origin=*&search=Albert') .then(function(res) { console.log(res); }) .catch(function(err) { console.log('Error: =>' + err); })

भले ही मुझे डरावना cors त्रुटि संदेश मिला, मेरा अनुरोध सर्वर को मार रहा था।

XMLHttpRequest cannot load "...url here...". No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Axios टीम, क्या आप कृपया ठीक कर सकते हैं ???

@mellogarrett यह एक अक्षीय संबंधित समस्या नहीं है। इसे पढ़ें: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

महत्वपूर्ण उद्धरण:

"सुरक्षा कारणों से, ब्राउज़र स्क्रिप्ट के भीतर से शुरू किए गए क्रॉस-ओरिजिन HTTP अनुरोधों को प्रतिबंधित करते हैं। उदाहरण के लिए, XMLHttpRequest और Fetch समान-मूल नीति का पालन करते हैं। इसलिए, XMLHttpRequest या Fetch का उपयोग करने वाला एक वेब एप्लिकेशन केवल अपने डोमेन के लिए HTTP अनुरोध कर सकता है। वेब अनुप्रयोगों में सुधार, डेवलपर्स ने ब्राउज़र विक्रेताओं से क्रॉस-डोमेन अनुरोधों की अनुमति देने के लिए कहा।"

जिन लोगों को यह समस्या है उनमें से कई के पास शायद विकल्प अनुरोध का जवाब देने वाला सर्वर नहीं है। सुनिश्चित करें कि आपके पास OPTIONS और POST अनुरोधों दोनों के लिए हैंडलर (CORS हेडर के साथ) हैं। क्लाइंट (Axios) पहले OPTIONS को पिंग करेगा और फिर POST करेगा।

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

किसी और के लिए इस मुद्दे को ठीक करने के लिए, मेरे पास सभी समान लक्षण थे लेकिन सर्वर पर एक php.ini सेटिंग में समस्या का पता लगाया।

मेरा प्रीफ्लाइट विकल्प अनुरोध सफल रहा और उसके बाद उचित POST अनुरोध आया लेकिन मुझे अभी भी @mellogarrett के समान No 'Access-Control-Allow-Origin' header is present on the requested resource... मिल रहा था। यह पूरी तरह से अजीब लग रहा था इसलिए मैंने CORS सुरक्षा को अस्थायी रूप से अक्षम करने के लिए Chrome प्लगइन का उपयोग किया। उसके बाद, मैं देख सकता था कि समस्या वास्तव में एक PHP त्रुटि थी:

Deprecated: Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in Unknown on line 0

इस पोस्ट में समस्या के बारे में अधिक जानकारी है, लेकिन संक्षेप में, यदि आप PHP 5.6 का उपयोग कर रहे हैं तो आपको अपने php.ini में always_populate_raw_post_data को अनकम्मेंट करना चाहिए और -1 सेट करना चाहिए। आशा है कि यह किसी और को समस्या निवारण के कुछ घंटों को बचाता है

अरे @daltonamitchell ऐसा लगता है कि मुझे एक ही समस्या है (शर्तें बताती हैं कि यह वही समस्या है)। लेकिन मैं सोच रहा हूं: आपने कैसे पता लगाया कि रॉ पोस्ट डेटा-एरर समस्या थी? क्रोम प्लगइन का उपयोग करते समय आपने उल्लेख किया है कि सीओआरएस अनुरोध के माध्यम से चला जाता है और सब कुछ ठीक काम करता है। लेकिन हेडर सही तरीके से सेट होने के बावजूद मैं इसे प्लगइन के बिना काम नहीं कर सकता। तो शायद बहिष्करण संदेश अभी प्रदर्शित नहीं हुआ है लेकिन समस्या अभी भी हो सकती है ...? क्या आप कुछ सलाह दे सकते हैं कि इसकी जांच कैसे करें?

@ RT-TL प्लगइन का उपयोग केवल CORS को ब्लॉक किए बिना प्रतिक्रिया सामग्री को देखने के लिए किया जाता है। मेरे मामले में, परीक्षण उद्देश्यों के लिए मैं सिर्फ Hello World तरह एक स्ट्रिंग लौटा रहा था, इसलिए एक बार जब मैंने CORS को अक्षम कर दिया तो मैंने कुछ ऐसा देखा

Deprecated: Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in Unknown on line 0
Hello World

अपने नियंत्रक विधि के शीर्ष पर error_reporting(E_ERROR | E_WARNING | E_PARSE | E_NOTICE) या error_reporting(E_ALL) जोड़कर सुनिश्चित करें कि आपके पास PHP चेतावनियां सक्षम हैं। यदि आप अभी भी कुछ भी नहीं देखते हैं तो मैं यह जांचने के लिए कुछ सरल JSON प्रतिक्रिया वापस करने का प्रयास करता हूं कि वे अपेक्षित दिखते हैं।

क्या कोई अभी भी इस समस्या का सामना कर रहा है? मैं उसी में भाग रहा हूँ:

const instance = axios.create({
    baseURL: 'http://localhost/',
    responseType: 'json',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': 'test',
        'X-Test': 'testing'
    }
})
axios.get('v2/portal/bar/foo?')

प्रतिक्रिया शीर्षलेख

HTTP/1.1 401 Unauthorized
Server: nginx/1.11.10
Date: Fri, 24 Mar 2017 07:12:13 GMT
Content-Type: application/json; charset=UTF-8
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, PUT, DELETE, GET, OPTIONS
Access-Control-Allow-Headers: *

अनुरोध शीर्षलेख

OPTIONS /v2/portal/bar/foo? HTTP/1.1
Host: localhost
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36
Access-Control-Request-Headers: authorization,content-type,x-test
Accept: */*
Referer: http://localhost:3000/dashboard/report
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,fr;q=0.6,nl;q=0.4,zh-TW;q=0.2,zh;q=0.2,zh-CN;q=0.2

मैं समझ नहीं पा रहा हूं कि मेरा कोई भी हेडर सही तरीके से क्यों नहीं भेजा जा रहा है।

यहां वही समस्या है, विकल्प अनुरोध किया गया है, लेकिन पोस्ट अनुरोध नहीं है।

TLDR: जब तक मैं JSON.stingify उपयोग नहीं करता, तब तक काम नहीं करता है, एक्सियोस नहीं करता है

इसलिए मैंने इस त्रुटि के प्रकार को भी देखा है जहां विकल्प क्रॉस मूल अनुरोधों के लिए हेडर सेट के साथ 200 देता है, लेकिन कोई पोस्ट नहीं किया जाता है। मैं इस एक्सटेंशन का उपयोग करता हूं और यह अपेक्षा के अनुरूप काम करना शुरू कर देता है। लेकिन मुझे पूरा यकीन है कि यहां किसी तरह की समस्या है। मेरे अनुरोध पर एक नज़र डालें:

मेरा सर्वर Access-Control-Allow-Origin: * साथ जवाब दे रहा है
यहां कोड और स्क्रीनशॉट के साथ सभी उदाहरण दिए गए हैं:

अक्ष:

axios.post('http://localhost:3001/card', { test: 'test' })

लाना:

    return fetch('http://localhost:3001/card', {
      method: 'POST',
      body: { test: 'test' },
    })

JSON.stringify

    return fetch('http://localhost:3001/card', {
      method: 'POST',
      body: JSON.stringify({ test: 'test' }),
    })

मैं JSON.stringify अपने डेटा को इस तरह से एक्सियोस काम करने में सक्षम था:

    return axios.post('http://localhost:3001/card', JSON.stringify({ test: 'test' }));

मुझे उसी समस्या का सामना करना पड़ रहा था जैसा कि @khitaker ने समझाया, axios मेरी कुकी को ठीक से नहीं भेज रहा था जिसके परिणामस्वरूप कम जानकारी के साथ प्रतिक्रियाएं हुईं (मुझे लगता है कि सुरक्षा चिंताओं के कारण)। दूसरी ओर नियमित XHR अनुरोध ने ठीक काम किया। फिर जैसा कि @zlyi ने सुझाव दिया कि मैंने अभी axios.defaults.withCredentials = true; लाइन जोड़ी है और सब कुछ उम्मीद के मुताबिक काम करने लगा।

सब कुछ करने की कोशिश की और अभी भी समस्या हो रही है। :(

सब कुछ करने की कोशिश की और अभी भी समस्या हो रही है। :(

निम्नलिखित को .htacsess में जोड़कर इस मुद्दे को प्रबंधित किया है:

<IfModule mod_headers.c> 
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" 
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS" 
</IfModule>

मैं प्रॉक्सी का उपयोग करके इसे संबोधित करने में सक्षम था। प्रॉक्सी को package.json

{
    "proxy": "http://some-url/some-endpoint"
}

फिर अनुरोध करें:

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })

यह एक सर्वर-साइड समस्या है, आपके प्रतिक्रिया शीर्षलेख में 'Acces-Control-Allow-Origin': '*' है। यदि आप एक्सप्रेस का उपयोग कर रहे हैं, तो अधिक मजबूत/सुरुचिपूर्ण कार्यान्वयन के लिए npm-cors का उपयोग कर सकते हैं।

+1 @ProfNandaa
मैंने अपने स्थानीय सर्वर में एक निर्यात बनाया है

# cors.js file
module.exports = (req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
}

तो मैं असाइन करता हूं:
```
const cors = आवश्यकता ('cors');
राउटर। उपयोग (कोर्स);
````
अब आगे बढ़ो... धन्यवाद

त्रुटि तब होगी जब सर्वर विकल्प अनुरोध को स्वीकार नहीं करता है।

टिप्पणी करने वालों के लिए "अपने सर्वर पर विकल्प अनुरोध हैंडलिंग जोड़ें", यह काम नहीं करता है। मैं एक स्थानीय वातावरण चला रहा हूं जिसमें विकल्प अनुरोध प्रबंधन सक्षम है।

मैंने उपरोक्त उपयोगकर्ता के रूप में समान रूप से इस समस्या का अनुभव किया, जहां Axios.post(url, obj) ने CORS 403 निषिद्ध त्रुटि लौटा दी, लेकिन इसे Axios.post(url, JSON.stringify(obj)) अपडेट करना सही ढंग से काम किया।

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

मैंने बस प्राप्त करने के लिए jsonp को प्रतिस्थापित किया और मैं डेटा तक पहुंचने में सक्षम था।

मुझे यह समस्या थी और कोआ-कॉर्स एक आसान समाधान था! (ProfNandaa के अनुसार एक्सप्रेस उपयोगकर्ताओं के लिए npm-cors)

उन लोगों के लिए जो अभी भी इसके साथ समस्या कर रहे हैं: Axios CORs के साथ ठीक काम करेगा , OPTIONS अनुरोधों के साथ, JSON को अनुरोध के मुख्य भाग के रूप में बिना JSON.encoded भेजे, और कुकीज़ के साथ भेजा और ठीक से जारी रखा, जब तक कि Axios और अनुरोधों का जवाब देने वाला सर्वर ठीक से कॉन्फ़िगर किया गया है।

इसमें कुछ निराशाजनक परीक्षण और त्रुटि हुई लेकिन हमारे पास Axios के साथ ठीक काम करने वाले क्रॉस डोमेन अनुरोध हैं।

कुछ बिंदु:

काम करने के अनुरोध के लिए, सुनिश्चित करें

• सर्वर विकल्प अनुरोधों का जवाब देता है, जैसे कि प्रतिक्रिया 200 के अलावा कुछ भी है, सभी सही हेडर सेट के साथ, "प्रीफ्लाइटेड" अनुरोध विफल हो जाएंगे।

• अनुरोध सही हेडर के साथ किया जाता है, और सर्वर सभी आवश्यक हेडर के साथ प्रतिक्रिया करता है।

• यदि कुकीज़/प्राधिकरण शीर्षलेख या टीएलएस क्लाइंट प्रमाणपत्र आवश्यक हैं, तो एक्सियोस अनुरोध के लिए अनुमति प्रमाण पत्र को सत्य पर भेजें। यह डिफ़ॉल्ट ( axios.defaults.withCredentials = true ) या प्रति अनुरोध के रूप में किया जा सकता है।

उदाहरण सफल अनुरोध शीर्षलेख

Access-Control-Request-Headers: Content-Type
Access-Control-Request-Method: GET

उदाहरण सफल प्रतिक्रिया शीर्षलेख

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin: http://your-origin-url.com

हमने धीरे-धीरे प्रतिक्रिया शीर्षलेख जोड़े और पाया कि हमारे पास विभिन्न संयोजनों के साथ त्रुटियों और अप्रत्याशित व्यवहार का निदान करना मुश्किल था

Access-Control-Allow-Credentials: true बिना कुकीज़ नहीं भेजी जा रही थीं या बनी नहीं रह रही थीं, जो उस हेडर के

इस दस्तावेज़ के माध्यम से पढ़ने से मदद मिलती है।

किसी को भी समस्या है, ...Allow-Headers: Content-Type महत्वपूर्ण है।

Access-Control-Allow-Origin: '*'
Access-Control-Allow-Methods: ...
Access-Control-Allow-Headers: Content-Type, Accept

मैं 'अनुमति-नियंत्रण-अनुमति-उत्पत्ति: *' नामक इस क्रोम एक्सटेंशन का उपयोग कर रहा हूं
आशा है कि यह आपकी समस्या में मदद कर सकता है।

किसी के लिए भी जो यह नहीं समझता है कि Axios इस त्रुटि को ठीक क्यों नहीं कर सकता:

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

जेकएल्डर यहां आपके एपीआई के सर्वर-साइड पर आपको क्या करने की आवश्यकता है, इसका एक अच्छा विवरण देता है: https://github.com/mzabriskie/axios/issues/191#issuecomment -311069164

यदि आपके पास उस सर्वर पर कोई नियंत्रण नहीं है जिसे आप एक्सेस करने का प्रयास कर रहे हैं तो आपको अपने लिए सामग्री लाने के लिए एक प्रॉक्सी सर्वर बनाना चाहिए और इसे सही हेडर के साथ वापस करना चाहिए।

सुनिश्चित नहीं है कि इसे क्यों लागू किया गया था। यह निश्चित रूप से कष्टप्रद है जब आप किसी सर्वर से कुछ जानकारी प्राप्त करने के लिए अनुरोध करना चाहते हैं, लेकिन ऐसा नहीं कर सकते क्योंकि सर्वर के पास एक विशिष्ट शीर्षलेख सेट नहीं है। अत्यधिक प्रतिबंधात्मक लगता है। ओह अच्छा ...

@ रॉबिन्स-एल्डो दोबारा, मुझे विश्वास नहीं है कि आप सही हैं।

मेरी मूल टिप्पणी:

For those commenting saying "Add OPTION request handling to your server", that does not work. I'm running a local environment that has OPTION request handling enabled.

I experienced this issue identically as a user above, where Axios.post(url, obj) returned the CORS 403 forbidden error, but updating that to Axios.post(url, JSON.stringify(obj)) worked correctly.

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

@alexanderbanks

विकल्प HTTP विधि के बारे में निश्चित नहीं है, लेकिन मेरी विशिष्ट समस्या यह थी कि मेरे पास एक प्रतिक्रिया क्लाइंट है जो मैंने लिखा एक आंतरिक एपीआई पर पोस्ट करने का प्रयास कर रहा है (आंतरिक एपीआई यहां सर्वर है)। मुझे यह त्रुटि मिलती रही: Failed to load resource: Origin http://localhost:7149 is not allowed by Access-Control-Allow-Origin. XMLHttpRequest cannot load http://localhost:8902/user-login due to access control checks.

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

app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); next(); });

शायद यहां पर्दे के पीछे वास्तव में क्या हो रहा है, इसकी मेरी समझ कुछ हद तक सीमित है, हालांकि, सर्वर पर इस बिट कोड ने मेरे लिए समस्या हल कर दी।

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

    return axios(url, {
      method: 'POST',
      mode: 'no-cors',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      withCredentials: true,
      credentials: 'same-origin',
    }).then(response => {
    })

मुझे लगता है कि यहाँ कुछ लोग भ्रमित हैं कि CORS कैसे काम करता है। हालाँकि, मूल समस्या CORS के बारे में नहीं थी, या कम से कम यह महत्वपूर्ण समस्या होनी चाहिए। मेरा मतलब है, जब आपके पास CORS ठीक से कॉन्फ़िगर किया गया है, लेकिन भले ही पोस्ट काम नहीं करता है, तो यह रिपोर्ट करने में समस्या है, न कि सर्वर को ठीक से कैसे कॉन्फ़िगर किया जाए

एपीआई अजीब अभिनय। सभी cors GET अनुरोध "क्रेडेंशियल्स: ट्रू" के साथ काम कर रहा था।
POST अनुरोधों के लिए, समान मूल अनुरोध डेटा ऑब्जेक्ट को स्ट्रिंग किए बिना काम कर रहा है जबकि CORS POST अनुरोध के लिए भी काम करना शुरू कर देता है जब मैं डेटा ऑब्जेक्ट को स्ट्रिंग करता हूं।

बिल्कुल कारण नहीं मिला लेकिन मेरे लिए समस्या हल हो गई।

मुझे खेद है, लेकिन मैं इस धागे को बंद कर रहा हूं क्योंकि ऐसा लगता है कि हम एक ही विषय के आसपास मंडलियां बना रहे हैं। यदि आपके पास कोई विशिष्ट समस्या है जिसे किसी अन्य मुद्दे में शामिल नहीं किया गया है (गलत कॉन्फ़िगरेशन के कारण सामान्य CORS मुद्दे, POST अनुरोध फ़ॉर्म-urlencoded के बजाय JSON के रूप में भेजे जा रहे हैं, आदि) तो कृपया विशिष्ट विवरण के साथ एक नया खोलें।