Axios: Ajout d'en-têtes à la méthode axios.post

Ce n'est pas un bug, cela fonctionne comme prévu.
Vous générez une demande de contrôle en amont (pas simple) comme indiqué dans la documentation https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS car vous ajoutez un en-tête et un type de contenu qui force cela.
Ainsi, dans ce mode, une requête OPTIONS est émise avant votre requête principale, vous devez vous assurer que le serveur peut gérer la requête OPTIONS pour que cela fonctionne.

Edit : j'ai dû ajouter une autorisation aux en-têtes autorisés dans mon filtre CORS

@jffernandez

J'ai le même problème. Lorsque je laisse de côté l'en-tête Auth, je reçois une requête Options qui renvoie POST, OPTIONS, puis le POST qui renvoie un 403 car il manque l'en-tête Authorization (attendu).

Lorsque j'ajoute l'en-tête, je reçois simplement la demande d'option et cela ne fait jamais le POST.

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

vs

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

C'est un problème CORS, pas dans axios. Veuillez consulter le lien fourni par @jffernandez ou recherchez des problèmes similaires ici.

Oui, il s'agit de CORS. Mais si vous êtes comme moi, vous avez probablement oublié d'ajouter Content-Type autorisé dans votre serveur API.

AllowedHeaders : Content-Type et X-Requested-With
Et l'autorisation dans votre cas.

Et bien sûr, n'oubliez pas d'autoriser également la méthode OPTIONS.

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

Ou si vous voulez surmonter cette erreur CORS, vous pouvez installer le package corsproxy dans votre nœud. Cela vous aidera avec les erreurs d'origine croisée. Vous pouvez vous référer au lien ci-dessous :

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

````
Connexion = () => {
console.log('connexion cliqué')
laisser data = JSON.stringify({
mot de passe : this.state.password,
nom d'utilisateur : this.state.email
})

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

}
```

Résolvez-le en ajoutant cet en-tête

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

Voici comment j'ai dû formater ma requête 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);
    })

pour résoudre l'erreur cors, exécutez simplement cette commande npm i --save cors puis dans votre importation app.js comme ceci

var cors = require('cors');
puis appelez comme ça dans le même fichier dans mon cas, mon fichier racine est app.js
app.use(cors());

cela résoudra votre problème cors

@mirzaumersaleem Je n'utilise pas le cors mais j'essaie de publier sur mon backend en utilisant axios et je reçois une requête 400 Bad

fetch peut faire avec cors (le backend n'a pas de problème), mais avec axios, parfois échoué.

pour résoudre l'erreur cors, exécutez simplement cette commande npm i --save cors puis dans votre importation app.js comme ceci

var cors = require('cors');
puis appelez comme ça dans le même fichier dans mon cas, mon fichier racine est app.js
app.use(cors());

cela résoudra votre problème cors

Dans mes voyages, CORS doit être fait sur le serveur (.net/java/node/php etc..)

Edit : j'ai dû ajouter une autorisation aux en-têtes autorisés dans mon filtre CORS

@jffernandez

J'ai le même problème. Lorsque je laisse de côté l'en-tête Auth, je reçois une requête Options qui renvoie POST, OPTIONS, puis le POST qui renvoie un 403 car il manque l'en-tête Authorization (attendu).

Lorsque j'ajoute l'en-tête, je reçois simplement la demande d'option et cela ne fait jamais le POST.

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

vs

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

la réponse rapide est que le premier argument après l'url et le second est souvent mal placé, c'est-à-dire axios (url, data, config), donc si vous omettez la partie config ou commutez les données et la config, vous obtenez probablement des résultats inattendus, en général, travailler avec localhost devrait être sans aucun problème.

En général, ce n'est pas très lisible

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, données[, config]])
axios.put(url[, données[, config]])
axios.patch(url[, données[, config]])

Je m'attendais à ce que toutes les API soient cohérentes et aient
1) url comme premier paramètre,
2) config comme deuxième paramètre (optionnel),
3) données (facultatif)

car c'est ce à quoi les utilisateurs s'attendent, malgré cela, axios a créé un énorme problème à partir de cette toute petite décision d'api, de sorte que presque tout le monde s'y est piégé au moins une fois dans sa vie.

Travail pour moi :

`
en-têtes const = {
'Type de contenu' : 'application/json',
'Autorisation' : 'JWT fege...'
}

axios.post(Helper.getUserAPI(), données, {
en-têtes : en-têtes
})
.then((réponse) => {
envoi({
saisissez : FOUND_USER,
données : réponse.données[0]
})
})
.catch((erreur) => {
envoi({
saisissez : ERROR_FINDING_USER
})
})
`

Face au même problème ici avec jquery, la demande est réussie, mais lorsque j'envoie le req avec axios, j'obtiens le problème cors.
Ma demande--

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

ce sont les en-têtes de réponse du serveur et mon origine locahost est autorisée, les en-têtes que j'envoie sont autorisés et les méthodes également.

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

Voici comment j'ai dû formater ma requête 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);
    })

Merci, j'ai sauvé ma journée ! A travaillé pour moi