Axios: إضافة رؤوس إلى طريقة axios.post

هذا ليس خطأ ، إنه يعمل كما هو متوقع.
أنت تنشئ طلبًا تم اختباره مسبقًا (ليس طلبًا بسيطًا) كما هو مذكور في المستندات https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS لأنك تضيف رأسًا ونوع محتوى يجبر هذا.
لذلك ، في هذا الوضع ، يتم إصدار طلب OPTIONS قبل طلبك الرئيسي ، يجب عليك التأكد من أن الخادم يمكنه إدارة طلب OPTIONS حتى يعمل.

تحرير: اضطررت إلى إضافة "التفويض" للرؤوس المسموح بها في مرشح CORS الخاص بي

تضمين التغريدة

لدي نفس المشكلة. عندما أترك رأس المصادقة ، أحصل على طلب خيارات والذي يُرجع POST ، OPTIONS ثم POST الذي يُرجع 403 لأنه يفتقد رأس التفويض (متوقع).

عندما أقوم بإضافة العنوان ، أحصل فقط على طلب الخيار ولا يتم إجراء POST أبدًا.

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

ضد

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

إنها قضية CORS ، وليست في محاور. يرجى إلقاء نظرة على الرابط jffernandez المقدم أو البحث عن مشكلات مماثلة هنا.

نعم ، يتعلق الأمر بـ CORS. ولكن إذا كنت مثلي ، فمن المحتمل أنك نسيت إضافة نوع المحتوى المصرح به في خادم api الخاص بك.

الرؤساء المسموح لهم: نوع المحتوى و X-Requested-With
والإذن في قضيتك.

وبالطبع ، لا تنس السماح بخيارات الطريقة أيضًا.

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

أو إذا كنت ترغب في تجاوز خطأ CORS ، يمكنك تثبيت حزمة corsproxy في العقدة الخاصة بك. سيساعدك هذا في تجاوز أخطاء الأصل. يمكنك الرجوع إلى الرابط أدناه:

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

""
تسجيل الدخول = () => {
console.log ("تم النقر فوق تسجيل الدخول")
السماح للبيانات = JSON.stringify ({
كلمة المرور: this.state.password،
اسم المستخدم: this.state.email
})

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

}
""

قم بحلها بإضافة هذا الرأس

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

هذه هي الطريقة التي اضطررت إلى تنسيق طلب 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);
    })

لحل خطأ cors ، ما عليك سوى تشغيل هذا الأمر npm i --save cors ثم في app.js استيراد مثل هذا

var cors = يتطلب ('cors') ؛
ثم استدعاء مثل هذا في نفس الملف في حالتي ملف الجذر الخاص بي هو app.js
app.use (cors ()) ؛

سوف تحل مشكلة كورس الخاص بك

mirzaumersaleem @ أنا لا أستخدم cors لكنني أحاول الإرسال إلى الواجهة الخلفية الخاصة بي باستخدام axios وأحصل على 400 طلب سيء

يمكن أن يفعل الجلب مع الكور (لا توجد مشكلة في الواجهة الخلفية) ، ولكن مع أكسيوس ، فشل في بعض الأحيان.

لحل خطأ cors ، ما عليك سوى تشغيل هذا الأمر npm i --save cors ثم في app.js استيراد مثل هذا

var cors = يتطلب ('cors') ؛
ثم استدعاء مثل هذا في نفس الملف في حالتي ملف الجذر الخاص بي هو app.js
app.use (cors ()) ؛

سوف تحل مشكلة كورس الخاص بك

في رحلاتي ، يجب إجراء CORS على الخادم (.net / java / node / php إلخ ..)

تحرير: اضطررت إلى إضافة "التفويض" للرؤوس المسموح بها في مرشح CORS الخاص بي

تضمين التغريدة

لدي نفس المشكلة. عندما أترك رأس المصادقة ، أحصل على طلب خيارات والذي يُرجع POST ، OPTIONS ثم POST الذي يُرجع 403 لأنه يفتقد رأس التفويض (متوقع).

عندما أقوم بإضافة العنوان ، أحصل فقط على طلب الخيار ولا يتم إجراء POST أبدًا.

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

ضد

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

الإجابة السريعة هي أن الوسيطة الأولى بعد عنوان url والثانية غالبًا ما تكون في غير محلها ، أي المحاور (url ، البيانات ، التكوين) ، لذلك إذا حذفت جزء التكوين أو تبديل البيانات والتهيئة ، فمن المحتمل أن تحصل على نتائج غير متوقعة ، بشكل عام ، يجب أن يكون العمل مع المضيف المحلي بدون أي مشاكل على الإطلاق.

بشكل عام ، ليس مقروءًا جدًا

طلب 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) عنوان url كمعامل أول ،
2) التكوين كمعلمة ثانية (اختياري) ،
3) البيانات (اختياري)

لأن هذا هو ما يتوقعه المستخدمون ، على الرغم من ذلك ، تسببت أكسيوس في مشكلة كبيرة من قرار واجهة برمجة التطبيقات الصغير الصغير ، بحيث حوصر الجميع هناك مرة واحدة على الأقل في العمر.

Wrok بالنسبة لي:

"
رؤوس ثابتة = {
"نوع المحتوى": "application / json"،
"ترخيص": "JWT fefege ..."
}

axios.post (Helper.getUserAPI () ، بيانات ، {
الرؤوس: الرؤوس
})
ثم ((استجابة) => {
إرسال({
النوع: FOUND_USER ،
البيانات: response.data [0]
})
})
. صيد ((خطأ) => {
إرسال({
اكتب: ERROR_FINDING_USER
})
})
"

تواجه نفس المشكلة هنا مع jquery ، يكون الطلب ناجحًا ولكن عندما أرسل req مع 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

هذه هي الطريقة التي اضطررت إلى تنسيق طلب 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);
    })

شكرا ، أنقذت يومي! عملت من أجلي