CORS policy error in SPFX

%3CLINGO-SUB%20id%3D%22lingo-sub-1041431%22%20slang%3D%22en-US%22%3ECORS%20policy%20error%20in%20SPFX%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1041431%22%20slang%3D%22en-US%22%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EError%20I%20receive%20in%20the%20browser%3A%3C%2FP%3E%3CP%3Ehas%20been%20blocked%20by%20CORS%20policy%3A%20Response%20to%20preflight%20request%20doesn't%20pass%20access%20control%20check%3A%20No%20'Access-Control-Allow-Origin'%20header%20is%20present%20on%20the%20requested%20resource.%3C%2FP%3E%3CP%3EAny%20Suggestions%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1041431%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAPIs%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Developer%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Framework%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESPFx%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1041470%22%20slang%3D%22en-US%22%3ERe%3A%20CORS%20policy%20error%20in%20SPFX%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1041470%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F244492%22%20target%3D%22_blank%22%3E%40TarundeepSinghTheta%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3ECORS%20error%20will%20appear%2Cwhen%20you%20are%20trying%20to%20invoke%20the%20API%20which%20is%20not%20hosted%20in%20your%20domain.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20you%20can%20modify%20the%26nbsp%3B%20hosted%20API%20configuration%2Cyou%20can%20allow%20CORS%20on%20the%20API%2Cotherwise%20you%20need%20to%20build%20some%20proxy%20to%20invoke%20the%20request.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EReadymade%20proxy%20will%20be%20heroku%20one%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fcors-anywhere.herokuapp.com%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcors-anywhere.herokuapp.com%2F%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThere%20are%20some%20side%20effects%20to%20it%26nbsp%3B%20as%20well%2Clike%20since%20this%20is%20hosted%20publicly%20%2Cyou%20might%20experience%20slowness%20if%20heroku%20one%20takes%20time%20to%20process%20your%20request.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eyou%20can%20build%20your%20own%20custom%20proxy%20as%20well%20and%20host%20it%20in%20your%20organization.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1041478%22%20slang%3D%22en-US%22%3ERe%3A%20CORS%20policy%20error%20in%20SPFX%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1041478%22%20slang%3D%22en-US%22%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F453843%22%20target%3D%22_blank%22%3E%40O365Developer%3C%2FA%3E%3CBR%20%2F%3EI%20only%20need%20to%20Authenticate%20username%20and%20password%20from%20another%20site.%3CBR%20%2F%3EI%20am%20using%20SharePoint%20Framework%20POST%20API%20to%20do%20so.%20I%20use%20the%20funciton%20%22this.context.httpClient.POST(%20postURL%2C%20HttpClient.configurations.v1%2C%20httpClientOptions)%22%3CBR%20%2F%3E%3CBR%20%2F%3EI%20have%20below%20mentioned%20headers%20and%20body%3CBR%20%2F%3E%3CBR%20%2F%3Econst%20body%3A%20string%20%3D%20JSON.stringify(%7B%3CBR%20%2F%3E'username'%3A%20value1%2C%3CBR%20%2F%3E'password'%3A%20value2%2C%3CBR%20%2F%3E'options'%3A%20value3%2C%3CBR%20%2F%3E%7D)%3B%3CBR%20%2F%3E%3CBR%20%2F%3Econst%20requestHeaders%3A%20Headers%20%3D%20new%20Headers()%3B%3CBR%20%2F%3ErequestHeaders.append('Content-type'%2C%20'application%2Fjson')%3B%3CBR%20%2F%3ErequestHeaders.append('Accept'%2C%20'application%2Fjson')%3B%3CBR%20%2F%3ErequestHeaders.append('Cache-Control'%2C%20'no-cache')%3B%3CBR%20%2F%3E%3CBR%20%2F%3ErequestHeaders.append('User-Agent'%2C%20'PostmanRuntime%2F7.20.1')%3B%3CBR%20%2F%3ErequestHeaders.append('Postman-Token'%2C%20'xxxxxxxxxxxxxxxxxxxxxxxxxx')%3B%3CBR%20%2F%3ErequestHeaders.append('Host'%2C%20'xxxxxx.oktapreview.com')%3B%3CBR%20%2F%3ErequestHeaders.append('Accept-Encoding'%2C%20'gzip%2C%20deflate')%3B%3CBR%20%2F%3ErequestHeaders.append('Content-Length'%2C%20'161')%3B%3CBR%20%2F%3ErequestHeaders.append('Cookie'%2C%20'xxxxxx%3Dxxxxxxxxxxxxxxxxxxxxx')%3B%3CBR%20%2F%3ErequestHeaders.append('Connection'%2C%20'keep-alive')%3B%3C%2FLINGO-BODY%3E
Occasional Contributor

 

Error I receive in the browser:

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any Suggestions

2 Replies

@TarundeepSinghTheta 

 

Hi,

CORS error will appear,when you are trying to invoke the API which is not hosted in your domain.

 

If you can modify the  hosted API configuration,you can allow CORS on the API,otherwise you need to build some proxy to invoke the request.

 

Readymade proxy will be heroku one 

 

https://cors-anywhere.herokuapp.com/

 

There are some side effects to it  as well,like since this is hosted publicly ,you might experience slowness if heroku one takes time to process your request.

 

you can build your own custom proxy as well and host it in your organization.

 

@O365Developer
I only need to Authenticate username and password from another site.
I am using SharePoint Framework POST API to do so. I use the funciton "this.context.httpClient.POST( postURL, HttpClient.configurations.v1, httpClientOptions)"

I have below mentioned headers and body

const body: string = JSON.stringify({
'username': value1,
'password': value2,
'options': value3,
});

const requestHeaders: Headers = new Headers();
requestHeaders.append('Content-type', 'application/json');
requestHeaders.append('Accept', 'application/json');
requestHeaders.append('Cache-Control', 'no-cache');

requestHeaders.append('User-Agent', 'PostmanRuntime/7.20.1');
requestHeaders.append('Postman-Token', 'xxxxxxxxxxxxxxxxxxxxxxxxxx');
requestHeaders.append('Host', 'xxxxxx.oktapreview.com');
requestHeaders.append('Accept-Encoding', 'gzip, deflate');
requestHeaders.append('Content-Length', '161');
requestHeaders.append('Cookie', 'xxxxxx=xxxxxxxxxxxxxxxxxxxxx');
requestHeaders.append('Connection', 'keep-alive');