Axios: Menambahkan header ke metode axios.post

Ini bukan bug, ini berfungsi seperti yang diharapkan.
Anda membuat permintaan pra-penerbangan (bukan yang sederhana) seperti yang dinyatakan dalam dokumen https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS karena Anda menambahkan tajuk dan tipe konten yang memaksa ini.
Jadi, dalam mode ini, permintaan OPSI dikeluarkan sebelum permintaan utama Anda, Anda harus memastikan server dapat mengelola permintaan OPSI agar berfungsi.

Sunting: Saya harus menambahkan Otorisasi ke header yang diizinkan di filter CORS saya

@jffernandez

Saya mengalami masalah yang sama. Ketika saya meninggalkan tajuk Auth, saya mendapatkan permintaan Opsi yang mengembalikan POST, OPSI, dan kemudian POST yang mengembalikan 403 karena tidak ada tajuk Otorisasi (diharapkan).

Ketika saya menambahkan tajuk, saya baru saja mendapatkan permintaan opsi dan tidak pernah membuat POST.

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

vs

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

Ini masalah CORS, bukan di axios. Silakan lihat tautan yang disediakan @jffernandez atau cari masalah serupa di sini.

Ya ini tentang CORS. Tetapi jika Anda seperti saya, kemungkinan besar Anda lupa menambahkan Content-Type yang diotorisasi di server api Anda.

AllowedHeaders : Content-Type dan X-Requested-With
Dan otorisasi dalam kasus Anda.

Dan tentu saja, jangan lupa untuk mengizinkan metode OPTIONS juga.

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

Atau jika Anda ingin mengatasi kesalahan CORS ini, Anda dapat menginstal paket corsproxy di node.js Anda. Ini akan membantu Anda dengan kesalahan lintas asal. Anda dapat merujuk ke tautan di bawah ini:

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

````
Masuk = () => {
console.log('login diklik')
biarkan data = JSON.stringify({
kata sandi: this.state.password,
nama pengguna: this.state.email
})

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

}
```

Selesaikan dengan menambahkan tajuk ini

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

Ini adalah bagaimana saya harus memformat permintaan POST saya

    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);
    })

untuk mengatasi kesalahan cors cukup jalankan perintah ini npm i --save cors dan kemudian di app.js Anda impor seperti ini

var cors = membutuhkan('cors');
lalu panggil seperti ini di file yang sama dalam kasus saya file root saya adalah app.js
app.use(cors());

itu akan menyelesaikan masalah kor Anda

@mirzaumersaleem Saya tidak menggunakan kor tetapi saya mencoba memposting ke backend saya menggunakan axios dan saya mendapatkan 400 permintaan Buruk

fetch dapat dilakukan dengan cors (backend tidak memiliki masalah), tetapi dengan aksioma, terkadang gagal.

untuk mengatasi kesalahan cors cukup jalankan perintah ini npm i --save cors dan kemudian di app.js Anda impor seperti ini

var cors = membutuhkan('cors');
lalu panggil seperti ini di file yang sama dalam kasus saya file root saya adalah app.js
app.use(cors());

itu akan menyelesaikan masalah kor Anda

Dalam perjalanan saya, CORS perlu dilakukan di server ( .net /java/node/php dll.)

Sunting: Saya harus menambahkan Otorisasi ke header yang diizinkan di filter CORS saya

@jffernandez

Saya mengalami masalah yang sama. Ketika saya meninggalkan tajuk Auth, saya mendapatkan permintaan Opsi yang mengembalikan POST, OPSI, dan kemudian POST yang mengembalikan 403 karena tidak ada tajuk Otorisasi (diharapkan).

Ketika saya menambahkan tajuk, saya baru saja mendapatkan permintaan opsi dan tidak pernah membuat POST.

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

vs

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

jawaban cepatnya adalah argumen pertama setelah url dan kedua sering salah tempat, yaitu axios(url, data, config), jadi jika Anda menghilangkan bagian config atau menukar data dan config Anda mungkin mendapatkan hasil yang tidak terduga, secara umum, bekerja dengan localhost seharusnya tanpa masalah sama sekali.

Secara umum, itu tidak terlalu mudah dibaca

axios.request(config)
axios.get(url[, konfigurasi])
axios.delete(url[, konfigurasi])
axios.head(url[, konfigurasi])
axios.options(url[, config])
axios.post(url[, data[, konfigurasi]])
axios.put(url[, data[, konfigurasi]])
axios.patch(url[, data[, konfigurasi]])

Saya berharap semua api konsisten, dan memiliki
1) url sebagai parameter pertama,
2) config sebagai parameter kedua (opsional),
3) data (opsional)

karena itulah yang diharapkan pengguna, meskipun begitu, axios membuat masalah besar dari keputusan api kecil itu, sehingga hampir semua orang terjebak di sana setidaknya sekali seumur hidup.

Buat saya:

`
header const = {
'Jenis Konten': 'aplikasi/json',
'Otorisasi': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), data, {
tajuk: tajuk
})
.then((tanggapan) => {
menugaskan({
jenis: FOUND_USER,
data: respon.data[0]
})
})
.catch((kesalahan) => {
menugaskan({
ketik: ERROR_FINDING_USER
})
})
`

Menghadapi masalah yang sama di sini dengan jquery permintaan berhasil tetapi ketika saya mengirim req dengan axios mendapatkan masalah cors.
Permintaanku--

      .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',
        // }
      })

ini adalah tajuk respons dari server dan asal locahost saya diizinkan tajuk yang saya kirim diizinkan dan metode juga.

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

Ini adalah bagaimana saya harus memformat permintaan POST saya

    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);
    })

Terima kasih, menyelamatkan hari saya! Bekerja untuk saya