Solved

Referral API request headers CORS problem


Hi comminity,

I’m trying to use Yotpo’s API documentation to implement Yotpo’s referral into my test shopify store. It’s a pretty basic API implementation, but I’m getting into troubles as the reponse from Yotpo server is always a x-guid and x-api-key headers error.

This is the request I’m sending:

const handleReferral = () => {
fetch(`https://loyalty.yotpo.com/api/v2/referral/share`, {
method: "POST",
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-Guid': 'wuL**************4-XKA',
'X-Api-Key': 'fMRdbg**************rAtt'
},
body: JSON.stringify({
email: 'yotpo_test@yopmail.com',
emails: 'yotpo_test_2@yopmail.com,yotpo_test_3@yopmail.com',
})
})
.then(response => response.json())
.then(resp => {
console.log(`resp: `, resp);
}).catch(e => {
console.error(`Error: `, e);
});
}

so every single time I call to handleReferral() it returns the followin error:

Access to fetch at 'https://loyalty.yotpo.com/api/v2/referral/share' from origin 'https://tsa-test-preview.myshopify.com' has been blocked by CORS policy: Request header field x-guid is not allowed by Access-Control-Allow-Headers in preflight response.

POST https://loyalty.yotpo.com/api/v2/referral/share net::ERR_FAILED

So, as you can see it says always that the x-guid is now allowed by the server so it launches the CORS problem but based on the documentation this is the headers we need to send with the request.
I have to mention the credentials and emails I’m using are ok, but I don’t get this API working.

 

As a note: if I use Postman for checking the request it will work and still don’t know why.

Following I send some reference images of the error:

Testing request in console
Preflight request returning 204
Request CORS error

 


Thanks in advance.

 

icon

Best answer by eschauffer 4 April 2024, 15:56

View original

3 replies

Badge

Hi @fabian.murillo, thanks for your question. I’ve contacted our product team to see if they can help out with this.

Stay tuned!

Eliana

Badge

Hi @fabian.murillo following up here. The reason you’re getting this error is because API calls cannot be done from the frontend. This is because it can expose the GUID and API Key. API calls must be initiated from the backend.

Let me know if you have additional questions!

Hi @eschauffer thanks for the reply, I’ll implement it on backend instead.

Just a quick note here: As the API authentication via header params was not returning a success response I have played around with the API and noticed it worked if I use the authentocation via query params from the frontend but not sure if this is going to have any problem in the future if I keep it.


https://loyaltyapi.yotpo.com/reference/authentication

Thanks again for the support.

Reply