How to resolve CORS issue with Yammer API search endpoint with AAD token from an Angular app?

%3CLINGO-SUB%20id%3D%22lingo-sub-1882611%22%20slang%3D%22en-US%22%3EHow%20to%20resolve%20CORS%20issue%20with%20Yammer%20API%20search%20endpoint%20with%20AAD%20token%20from%20an%20Angular%20app%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1882611%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Screenshot%202020-11-12%20210752.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F233284i4783AFB6AC852052%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Screenshot%202020-11-12%20210752.png%22%20alt%3D%22Screenshot%202020-11-12%20210752.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20face%20the%20above%20CORS%20policy%20error%20when%20an%20API%20call%20is%20made%20to%20the%20Yammer%20API%20search%20endpoint.%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20issue%20is%20seen%20when%20User's%20AAD%20token%20is%20created%20for%20the%20scope%3A%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3CSPAN%3E%22%3CA%20href%3D%22https%3A%2F%2Fapi.yammer.com%2Fuser_impersonation%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Fapi.yammer.com%2Fuser_impersonation%3C%2FA%3E%22%3C%2FSPAN%3E%3CSPAN%3E%5D%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3ECondition%3A%26nbsp%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EThe%20same%20app%20works%20when%20an%20token%20generated%20using%20Yammer%2Fclient%20application.%20But%20the%20app%20throws%20cors%20error%20when%20the%20token%20is%20generated%20using%20the%20AAD%20app.%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EI%20have%20followed%20the%20below%20process%20to%20generate%20access%20token%20for%20the%20user%20logged%20in%3A%20%3C%2FSPAN%3E%3C%2FDIV%3E%3COL%3E%3CLI%3E%3CSPAN%3ECreated%20an%20app%20in%20the%20AAD%20app%20registration%3C%2FSPAN%3E%3C%2FLI%3E%3CLI%3EAdded%20Yammer%20API%20as%20API%20Permission%20with%20Delegated%20User_Impersonation%20permission.%26nbsp%3B%3C%2FLI%3E%3CLI%3EAdmin%20granted%20for%20whole%20organization%20to%20use%20this%20app%20to%20login.%26nbsp%3B%3C%2FLI%3E%3CLI%3EUse%20the%20client_ID%20in%20the%20MSAL%20library%20for%20Angular%20application%20to%20log%20user%20in%20and%20generate%20Yammer%20token.%26nbsp%3B%3C%2FLI%3E%3CLI%3EToken%20creation%20successful%2C%20The%20token%20works%20fine%20when%20used%20with%20postman.%26nbsp%3B%3C%2FLI%3E%3C%2FOL%3E%3CDIV%3E%3CDIV%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1882611%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EYammer%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Occasional Visitor

Screenshot 2020-11-12 210752.png

 

I face the above CORS policy error when an API call is made to the Yammer API search endpoint. 

The issue is seen when User's AAD token is created for the scope: 

 
Condition: 
The same app works when an token generated using Yammer/client application. But the app throws cors error when the token is generated using the AAD app.
 
I have followed the below process to generate access token for the user logged in:
  1. Created an app in the AAD app registration
  2. Added Yammer API as API Permission with Delegated User_Impersonation permission. 
  3. Admin granted for whole organization to use this app to login. 
  4. Use the client_ID in the MSAL library for Angular application to log user in and generate Yammer token. 
  5. Token creation successful, The token works fine when used with postman. 
 
1 Reply

@hcssumanth Let me know if you get any resolution on this. I am getting same error on my React App