Avec un type d'envoi API Fetch: multipart/form-data, comment envoyer un en-tête Authorization?

Question

dans mon application React, j'ai l'API POST suivant pour permettre à l'utilisateur de modifier leur profil (nom et image).

static updateProfile(formData, user_id) { 
    const request = new Request(`http://localhost:4300/api/v1/profiles/${user_id}`, { 
     headers: new Headers({ 
     'Authorization': getBearerToken() 
     }), 
     mode: 'no-cors', 
     method: "POST", 
     body: formData 
    }); 

    return fetch(request).then(response => { 
     return response.json(); 
    }).catch(error => { 
     return error; 
    }); 
    } 

Le problème avec ce qui précède est l'en-tête avec le jeton d'autorisation n'est pas envoyé dans le POST ...

Comment puis-je obtenir l'en-tête d'autorisation à envoyer dans la demande de récupération ci-dessus?

Pour votre information, pour les formes non-multipart, le jeton d'autorisation est envoyée comme ceci:

static loadProfile(user_id) { 
    const request = new Request(`http://localhost:4300/api/v1/profiles/${user_id}`, { 
     headers: new Headers({ 
     'Authorization': getBearerToken(), 
     'Accept'  : 'application/json', 
     'Content-Type' : 'application/json', 
     }) 
    }); 

    return fetch(request).then(response => { 
     return response.json(); 
    }).catch(error => { 
     return error; 
    }); 
    } 

Answer 1

Vous ne pouvez pas utiliser mode: 'no-cors' si vous voulez définir les en-têtes de demande spéciale, parce que l'un des effets de l'utiliser pour une demande, il indique aux navigateurs de ne pas autoriser votre code JavaScript frontal à définir des en-têtes de requête autres que CORS-safelisted request-headers. Voir the spec requirements:

Pour ajouter un nom/valeur (nom/valeur) paire à un objet Headers (têtes), exécutez les étapes suivantes:

5. Sinon, si garde est "request-no-cors" et nom/valeur est pas un CORS-safelisted request-header, le retour.

Dans cet algorithme, return équivaut à « retour sans ajouter cet en-tête de l'objet en-têtes ».

Authorization n'est pas un CORS-safelisted request-header, donc votre navigateur ne vous permettra pas de définir si vous utilisez mode: 'no-cors' pour une demande. Idem pour Content-Type: application/json.

Si la raison pour laquelle vous essayez d'utiliser mode: 'no-cors' est d'éviter un autre problème qui survient si vous ne l'utilisez pas, la solution consiste à résoudre la cause sous-jacente de cet autre problème. Parce qu'en général, peu importe le problème que vous pourriez essayer de résoudre, mode: 'no-cors' ne va pas se révéler être une solution à la fin. Cela va créer différents problèmes comme ce que vous frappez maintenant.

Answer 2

En utilisant le code ci-dessous, vous pouvez faire une demande d'extraction avec autorisation ou au porteur

var url = "https://yourUrl"; 
    var bearer = 'Bearer '+ bearer_token; 
    fetch(url, { 
    method: 'GET', 
    withCredentials: true, 
    credentials: 'include', 
    headers: { 
     'Authorization': bearer, 
     'X-FP-API-KEY': 'iphone', 
     'Content-Type': 'application/json'} 
    }).then((responseJson) => { 
     var items = JSON.parse(responseJson._bodyInit); 
    }) 
    .catch(error => this.setState({ 
    isLoading: false, 
    message: 'Something bad happened ' + error 
    }));