Unable to make LinkedIn API calls from localhost with Axios

Question

I am trying to access linkedin profile using axios get request, which doesn't work on localhost and I get the following error

XMLHttpRequest cannot load https://api.linkedin.com/v1/people/~:(id,email-address)?format=json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8030' is therefore not allowed access. The response had HTTP status code 401.

I am able to get access-token using react-linkedin-login package, after getting the access token I am trying the following code

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

The problems lies in linkedin server how it takes request I guess, it doesn't allow localhost to make call I think. How to overcome this to actually develop the service before I deploy and run on server.

Thanks for helping..

Possible duplicate of ["No 'Access-Control-Allow-Origin' header is present on the requested resource"](https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource) — Dan, Sep 11 '17 at 18:34
See the answer at https://stackoverflow.com/questions/44530615/oauth-redirect-returning-no-access-control-allow-origin-header-is-present-on-t/44532166#44532166, and the code examples there. As far as I know, the only supported way LinkedIn provides for accessing their API from frontend JavaScript code running in a browser is with their JavaScript SDK, which is documented at https://developer.linkedin.com/docs/getting-started-js-sdk and which the answer cited above has code examples for — sideshowbarker, Sep 11 '17 at 21:19

score 1 · Answer 1 · answered Sep 11 '17 at 18:33

This is because of a browser restriction called the "Same-origin Policy", which prevents fetching data from, or posting data to, URLs that are part of other domains. You can get around it if the other domain supports Cross-origin Resource Sharing (CORS), but it looks like LinkedIn doesn't, so you may have trouble.

One way around this is to have a web service which can proxy your request to LinkedIn - there's no domain restrictions there.

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

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

Joel Raju · Answer 2 · 2017-09-11T20:04:27.880

1

try jsonp for CORS request - reference - axios cookbook

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

EDIT

Use jQuery to perform JSONP request and to set headers

$.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);
  },
});

edited Sep 11 '17 at 20:04

answered Sep 11 '17 at 18:42

Joel Raju

1,210
2
18
21

Yes it did something, I am not getting the CORS error.. but getting timeout now.. will check and let you know.. – iphonic Sep 11 '17 at 19:14
try passing `{timeout: 0}` as the second argument instead of `null`- https://github.com/webmodules/jsonp#jsonpurl-opts-fn – Joel Raju Sep 11 '17 at 19:35
Is there any way to pass headers as I need to add a header with this value 'Authorization': `Bearer ${accessToken}` – iphonic Sep 11 '17 at 19:37
there is no way to add header with `jsonp` library, so you are better off using `jquery` – Joel Raju Sep 11 '17 at 20:05

score 1 · Answer 3 · answered Oct 04 '19 at 12:33

1

https://cors-anywhere.herokuapp.com/ - Add this before the url and it will work

answered Oct 04 '19 at 12:33

BennKingy

1,265
1
18
43

Unable to make LinkedIn API calls from localhost with Axios

3 Answers3