Axios: axios.post विधि में शीर्षलेख जोड़ना

को निर्मित 24 अप्रैल 2017 · 17टिप्पणियाँ · स्रोत: axios/axios

नमस्ते,

मैंने क्रॉस-डोमेन आईपी के लिए एक पोस्ट अनुरोध करने का प्रयास किया और मेरा कोड जैसा दिखता है;

  var authOptions = {
    method: 'POST',
    url: 'http://10.254.147.184:7777/auth/oauth/token',
    data: qs.stringify(data),
    headers: {
        'Authorization': 'Basic Y2xpZW50OnNlY3JldA==',
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    json: true
  };
  return dispatch => {
    return axios(authOptions)
    .then(function(response){
      console.log(response.data);
      console.log(response.status);
    })
    .catch(function(error){
      console.log(error);
    });

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

स्रोत

burakuluu

👍4

सबसे उपयोगी टिप्पणी

संपादित करें: मुझे अपने CORS फ़िल्टर में अनुमत शीर्षलेखों में प्राधिकरण जोड़ना पड़ा

@jffernandez

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

जब मैं हेडर जोड़ता हूं तो मुझे केवल विकल्प अनुरोध मिलता है और यह कभी पोस्ट नहीं करता है।

post("http://localhost:8080/foo", foo)

बनाम

post("http://localhost:8080/foo", foo, {
    headers: { Authorization: "Bearer " + token }
})

ofiesh 18 मई 2017

👍141 ❤41 🎉38 🚀16 👀4 😄4

सभी 17 टिप्पणियाँ

यह कोई बग नहीं है, यह अपेक्षा के अनुरूप काम कर रहा है।
जैसा कि https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS दस्तावेज़ों में बताया गया है, आप एक पूर्व-उड़ान अनुरोध (आसान नहीं) उत्पन्न कर रहे हैं क्योंकि आप एक शीर्षलेख और एक सामग्री-प्रकार जोड़ रहे हैं जो इसे मजबूर करता है।
इसलिए, इस मोड में, आपके मुख्य अनुरोध से पहले एक विकल्प अनुरोध जारी किया जाता है, आपको यह सुनिश्चित करना होगा कि सर्वर काम करने के लिए विकल्प अनुरोध का प्रबंधन कर सकता है।

jffernandez 3 मई 2017

👍48 😕32 👎9

@jffernandez

post("http://localhost:8080/foo", foo)

बनाम

post("http://localhost:8080/foo", foo, {
    headers: { Authorization: "Bearer " + token }
})

ofiesh 18 मई 2017

👍141 ❤41 🎉38 🚀16 👀4 😄4

यह एक CORS मुद्दा है, अक्ष में नहीं। कृपया प्रदान किए गए लिंक @jffernandez पर एक नज़र डालें या यहां समान मुद्दों की तलाश करें।

rubennorte 17 अग॰ 2017

👎58 👍10 ❤1

हाँ यह CORS के बारे में है। लेकिन अगर आप मेरे जैसे हैं, तो आप शायद अपने एपीआई सर्वर में अधिकृत सामग्री-प्रकार जोड़ना भूल गए हैं।

स्वीकृत शीर्षलेख: सामग्री-प्रकार और एक्स-अनुरोधित-साथ
और आपके मामले में प्राधिकरण।

और हां, विधि विकल्प को भी अनुमति देना न भूलें।

ndeixonne 22 सित॰ 2017

👍4

axios({ method: 'POST', url: 'you http api here', headers: {autorizacion: localStorage.token}, data: { user: 'name' } })

robertgon97 28 सित॰ 2017

👍31 ❤12 🎉8

या यदि आप इस CORS त्रुटि को दूर करना चाहते हैं तो आप अपने नोड में corsproxy पैकेज स्थापित कर सकते हैं। यह आपको क्रॉस ओरिजिनल त्रुटियों में मदद करेगा। आप नीचे दिए गए लिंक का उल्लेख कर सकते हैं:

https://github.com/gr2m/CORS-Proxy

sharma848 27 अक्तू॰ 2017

👍2

````
साइन इन = () => {
कंसोल.लॉग ('लॉगिन क्लिक किया गया')
डेटा दें = JSON.stringify ({
पासवर्ड: this.state.password,
उपयोगकर्ता नाम: this.state.email
})

axios.post('url', data, {
    headers: {
        'Content-Type': 'application/json',
    }
}
)

}
```

BenAhlander 2 नव॰ 2017

👍41 👀6

इस हेडर को जोड़कर इसे हल करें

   axios.post('http://localhost/M-Experience/resources/GETrends.php',
      {
        firstName: this.name
      },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });

Matu95 7 दिस॰ 2017

👍19 🎉9 ❤3

इस प्रकार मुझे अपना POST अनुरोध प्रारूपित करना पड़ा

    var postData = {
      email: "[email protected]",
      password: "password"
    };

    let axiosConfig = {
      headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          "Access-Control-Allow-Origin": "*",
      }
    };

    axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
    .then((res) => {
      console.log("RESPONSE RECEIVED: ", res);
    })
    .catch((err) => {
      console.log("AXIOS ERROR: ", err);
    })

mdrideout 27 जन॰ 2018

👍29 ❤6 🎉6

कॉर्स एरर को हल करने के लिए बस इस कमांड को चलाएँ npm i --save cors और फिर अपने app.js में इस तरह इम्पोर्ट करें

var cors = आवश्यकता ('cors');
फिर उसी फाइल में इस तरह कॉल करें मेरे मामले में मेरी रूट फाइल है app.js
ऐप.यूज (कॉर्स ());

यह आपके कोर मुद्दे को हल करेगा

mirzaumersaleem 8 मार्च 2018

👎16 👍2

@mirzaumersaleem मैं cors का उपयोग नहीं कर रहा हूं, लेकिन मैं axios का उपयोग करके अपने बैकएंड पर पोस्ट करने का प्रयास कर रहा हूं और मुझे 400 खराब अनुरोध मिल रहा है

klever34 12 जुल॰ 2018

भ्रूण cors के साथ कर सकता है (बैकएंड में कोई समस्या नहीं है), लेकिन axios के साथ, कभी-कभी विफल हो जाता है।

mosleim 15 जुल॰ 2019

कॉर्स एरर को हल करने के लिए बस इस कमांड को चलाएँ npm i --save cors और फिर अपने app.js में इस तरह इम्पोर्ट करें
var cors = आवश्यकता ('cors');
फिर उसी फाइल में इस तरह कॉल करें मेरे मामले में मेरी रूट फाइल है app.js
ऐप.यूज (कॉर्स ());
यह आपके कोर मुद्दे को हल करेगा

मेरी यात्रा में, सर्वर पर CORS करने की आवश्यकता है (.net /java/node/php आदि..)

tazmanrising 9 अक्तू॰ 2019

संपादित करें: मुझे अपने CORS फ़िल्टर में अनुमत शीर्षलेखों में प्राधिकरण जोड़ना पड़ा
@jffernandez
मुझे एक ही समस्या हो रही है। जब मैं ऑथ हेडर छोड़ता हूं तो मुझे एक विकल्प अनुरोध मिल रहा है जो पोस्ट, विकल्प और फिर पोस्ट देता है जो 403 देता है क्योंकि इसमें प्राधिकरण शीर्षलेख (अपेक्षित) गुम है।
जब मैं हेडर जोड़ता हूं तो मुझे केवल विकल्प अनुरोध मिलता है और यह कभी पोस्ट नहीं करता है।
post("http://localhost:8080/foo", foo)
बनाम
post("http://localhost:8080/foo", foo, {
    headers: { Authorization: "Bearer " + token }
})

त्वरित उत्तर यह है कि url के बाद पहला तर्क और दूसरा अक्सर गलत स्थान पर होता है, अर्थात axios(url, data, config), इसलिए यदि आप कॉन्फिग भाग या स्विच किए गए डेटा को छोड़ देते हैं और कॉन्फिगर करते हैं तो आपको शायद अप्रत्याशित परिणाम मिलते हैं, सामान्य तौर पर, लोकलहोस्ट के साथ काम करना चाहिए बिना किसी मुद्दे के।

सामान्य तौर पर, यह बहुत पठनीय नहीं है

axios.request (कॉन्फ़िगरेशन)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

मुझे उम्मीद थी कि सभी एपीआई सुसंगत हैं, और है
1) पहले पैरामीटर के रूप में यूआरएल,
2) दूसरे पैरामीटर (वैकल्पिक) के रूप में कॉन्फ़िगर करें,
3) डेटा (वैकल्पिक)

कारण यही है कि उपयोगकर्ता अपेक्षा करते हैं, इसके बावजूद, axios ने उस छोटे से एपीआई निर्णय से एक बड़ी समस्या बनाई है, जिससे कि लगभग हर कोई जीवन में कम से कम एक बार वहां फंस गया।

funcelot 3 नव॰ 2019

मेरे लिए काम किया:

`
कॉन्स्ट हेडर = {
'सामग्री-प्रकार': 'एप्लिकेशन/जेसन',
'प्राधिकरण': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), डेटा, {
शीर्षलेख: शीर्षलेख
})
तब ((प्रतिक्रिया) => {
प्रेषण({
प्रकार: FOUND_USER,
डेटा: प्रतिक्रिया। डेटा [0]
})
})
कैच ((त्रुटि) => {
प्रेषण({
प्रकार: ERROR_FINDING_USER
})
})
`

Pratikshakhandagale 7 नव॰ 2019

Jquery के साथ यहां एक ही समस्या का सामना करना अनुरोध सफल होता है लेकिन जब मैं axios के साथ cors समस्या प्राप्त करने के लिए रिक भेजता हूं।
मेरा अनुरोध--

      .post('https://test.pi.com/j_spring_security_check', {

        withCredentials: true,
        crossorigin: true,
        headers: {
          common:{
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'WithCredentials': true,
            'Access-Control-Allow-Origin': '*'
        }
      },
        data: JSON.stringify({
          j_username: email,
          j_password: password
        }),

        // proxy: {
        //   '/j_spring_security_check/*': 'https://devtest.pvai.com/j_spring_security_check',
        // }
      })

ये सर्वर से प्रतिक्रिया शीर्षलेख हैं और मेरे लोकहोस्ट मूल की अनुमति है जो शीर्षलेख मैं भेज रहा हूं और विधियों की भी अनुमति है।

access-control-allow-credentials: true
access-control-allow-headers: Authorization, X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept
access-control-allow-methods: POST, GET, OPTIONS
access-control-allow-origin: http://localhost:5000
access-control-expose-headers: Authorization
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-length: 0
date: Wed, 11 Dec 2019 04:53:25 GMT
expires: 0
location: /authFailure
pragma: no-cache
status: 302
strict-transport-security: max-age=31536000 ; includeSubDomains
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

ghost62 11 दिस॰ 2019

इस प्रकार मुझे अपना POST अनुरोध प्रारूपित करना पड़ा

    var postData = {
      email: "[email protected]",
      password: "password"
    };

    let axiosConfig = {
      headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          "Access-Control-Allow-Origin": "*",
      }
    };

    axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
    .then((res) => {
      console.log("RESPONSE RECEIVED: ", res);
    })
    .catch((err) => {
      console.log("AXIOS ERROR: ", err);
    })

धन्यवाद, मेरा दिन बचा लिया! मेरे लिए काम किया

baiosbay 27 दिस॰ 2019

😄1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Axios: axios.post विधि में शीर्षलेख जोड़ना

सबसे उपयोगी टिप्पणी

सभी 17 टिप्पणियाँ

संबंधित मुद्दों