I trying to get the r_liteprofile from LinkedIn, using the Oauth2 3-legged flow. It works flawlessly in Postman, but for some reason, it keeps returning 'Unknown Error' in Angular 11:
The code snippet:
params = new HttpParams()
.set('client_id', authTokenReq.clientId)
.set('redirect_uri', authTokenReq.redirectUri)
.set('client_secret', authTokenReq.clientSecret)
.set('code', authTokenReq.code)
.set('grant_type', authTokenReq.grantType);
headers = new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'});
this.http.post<AccessToken>(authTokenReq.authUrl, params, {headers}).subscribe(incData => {
this.accessToken = incData;
console.log('incData', incData);
console.log('access_token', this.accessToken.access_token);
headers = new HttpHeaders();
headers = headers.set('Authorization', 'Bearer'+' '+this.accessToken.access_token);
console.log('headers', headers.getAll('Authorization'));
this.http.get<LinkedInClient>('https://api.linkedin.com/v2/me?projection=(id)', { headers: new HttpHeaders({'Authorization': 'Bearer ' + this.accessToken.access_token})}).subscribe(client => {
console.log('client', client['id']);
Looking at the console debug from Chrome, it seems that the header is set correctly:
Request URL: https://api.linkedin.com/v2/me?projection=(id)
Referrer Policy: strict-origin-when-cross-origin
Provisional headers are shown
Accept: application/json, text/plain, */*
Authorization: Bearer AQWzG74CqibM05G1XiJn26y1DyPA-imcbbGB7kwFXqMUWi4t0v33d_nddqpNky4hkuUAt0rja00srjb1QIU1MzOgBtHDsci-jPS-UElbhStNcBzfFLt0FdiuydfDlIbqhrmdF8QQXFlN_2QbNpKUBGHKtDxfp-BDandIB6fCi1Uq9r8VKxUedJ1Ok--u1Lbr6rTcbXMjb0ntupidTOu9xyW9Pb5qzwOwTsj29xl9P4ymAsApq69ehAMiocRXwRhilPOLW7H2YvEbu4PElZMfw7aE3ria2Iq8CK5eRBqpKD9Sjx1ne6o23XfSfptZ6_OBFUSCATED
DNT: 1
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36
projection: (id)
But the pre-flight fails with a 401:
Request URL: https://api.linkedin.com/v2/me?projection=(id)
Request Method: OPTIONS
Status Code: 401
Remote Address: 185.63.144.4:443
Referrer Policy: strict-origin-when-cross-origin
:authority: api.linkedin.com
:method: OPTIONS
:path: /v2/me?projection=(id)
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en,da;q=0.9,en-GB;q=0.8
access-control-request-headers: authorization
access-control-request-method: GET
cache-control: no-cache
origin: http://localhost:4200
pragma: no-cache
referer: http://localhost:4200/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36
projection: (id)
Response from the preflight:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: authorization
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin: http://localhost:4200
content-length: 77
content-type: application/json
date: Wed, 27 Jan 2021 12:39:11 GMT
set-cookie: lidc="b=VB80:s=V:r=V:g=2759:u=1:i=1611751151:t=1611837551:v=1:sig=AQFhRnWHUE1TRiOaiG6PCqG6oXnXjSYF"; Expires=Thu, 28 Jan 2021 12:39:11 GMT; domain=.linkedin.com; Path=/; SameSite=None; Secure
x-li-fabric: prod-lva1
x-li-pop: prod-efr5
x-li-proto: http/2
x-li-responseorigin: RGW
x-li-uuid: DZn48iEXXhYAduwb5yoAAA==
x-restli-gateway-error: true
in the debug console:
core.js:5967 ERROR HttpErrorResponse?{headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://api.linkedin.com/v2/me?projection=(id)", ok: false,?…}
If run the exact same code with web security disabled like:
chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security
It works like a charm! - does LinkedIn have problem with CORS? / does Chrome?
any ideas...?
question from:
https://stackoverflow.com/questions/65918316/angular-11-getting-the-v2-me-from-linkedin-unknown-error 
