Impossible de faire des appels API LinkedIn depuis localhost avec Axios

Question

Je suis en train d'accéder à profil linkedin utilisant Axios se demande, ce qui ne fonctionne pas sur localhost et je reçois l'erreur suivante

XMLHttpRequest ne peut pas charger https://api.linkedin.com/v1/people/~:(id,email-address)?format=json. La réponse à la demande de contrôle en amont ne passe pas contrôle d'accès contrôle: Non L'en-tête 'Access-Control-Allow-Origin' est présent sur la ressource demandée. L'origine 'http://localhost:8030' n'est donc pas autorisée accès. La réponse a un code d'état HTTP 401.

Je suis en mesure d'obtenir un accès jeton à l'aide package react-linkedin-login, après avoir reçu le jeton d'accès J'essaie le code suivant

var linkedInUrl = `https://api.linkedin.com/v1/people/~:(id,email-address)?format=json`; 
    var headers = { 
    'Authorization': `Bearer ${accessToken}`, 
    'Access-Control-Allow-Methods':'GET,PUT,PATCH,POST,DELETE', 
    'Access-Control-Allow-Origin':'*', 
    'Access-Control-Request-Headers':'Origin, X-Requested-With, Content-Type, Accept', 
    'Content-Type':'application/x-www-form-urlencoded' 
    }; 

    return (dispatch) => { 
    axios.get(linkedInUrl, {headers}).then(({data}) => { 
     console.log(data); 
    }, (error) => { 
     console.log(error); 
    }); 
    } 

Les problèmes se trouve dans le serveur linkedin comment ça prend demande je suppose, ça ne permet pas à localhost de faire appel je pense. Comment surmonter cela pour développer réellement le service avant de le déployer et de l'exécuter sur le serveur.

Merci de nous aider ..

Answer 1

Ceci est dû à une restriction du navigateur appelé la « politique d'origine même », ce qui empêche les données ou récupérer d'informations, envoyez des messages URL qui font partie d'autres domaines. Vous pouvez contourner le problème si l'autre domaine prend en charge le partage de ressources d'origine croisée (CORS), mais il semble que LinkedIn ne le soit pas, ce qui peut vous poser problème. Un moyen de contourner cela est d'avoir un service Web qui peut transmettre votre demande à LinkedIn - il n'y a pas de restrictions de domaine là-bas.

https://en.wikipedia.org/wiki/Same-origin_policy

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Answer 2

essayer jsonp de la demande CORS - référence - axios cookbook

var jsonp = require('jsonp'); 
jsonp(linkedInUrl, null, function (err, data) { 
    if (err) { 
    console.error(err.message); 
    } else { 
    console.log(data); 
    } 
}); 

EDIT

Utilisez jQuery pour effectuer JS ONP demande et pour définir les en-têtes

$.ajax({url: linkedInUrl, 
    type: 'GET', 
    contentType: "application/json", 
    headers: header, /* pass your header object */ 
    dataType: 'jsonp', 
    success: function(data) { 
    console.log(data); 
    }, 
    error: function(err) { 
    console.log('Error', err); 
    }, 
});