Access to fetch has been blocked by CORS policy - Fetch() JS issue

Question

I have to update the profile's property in klaviyo with API. so I made this JS. but for some reasons, it doesn't work with me! This is API guide to update profile's property. I followed it but showing this issue! Could someone help me to fix this issue? many thanks

https://apidocs.klaviyo.com/reference/profiles#update-profile

  const options = {method: 'PUT', headers: {'Accept': 'application/json', 'Access-Control-Allow-Origin': '*'}};

  fetch('https://a.klaviyo.com/api/v1/person/01FHGADW5PW4SF33JMWPSN9KQX?api_key=pk_d3af8ba75d110725231231ba795f05ffe77fb&$locale=es-US', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

Also, this ajax's result is the same. still showing the same issue. I'd like to get profile info! The first is to update the profile, second is to get profile info. but all is not working! very sad!

  var $email = '1919@gmail.com';
  $.ajax({
    type: 'POST',
    url: `https://a.klaviyo.com/api/v2/people/search?api_key=pk_d3af8ba75d110725231123ba795f05ffe77fb&email=${$email}`,
    success: function(res){
      console.log(res);
    }
  });

do not post the api_key publicly like this. Instead , put a placeholder for understanding. Delete the key and generate another one immediately — Jay Surya, Oct 08 '21 at 18:52
Maybe this could help you: https://stackoverflow.com/a/55584963/13604954 — Patfreeze, Oct 08 '21 at 18:58

score 1 · Accepted Answer · answered Oct 08 '21 at 18:47

1

The access control header has to be put on the server, not on the client. If you don't control the server, there's nothing you can do about this.

answered Oct 08 '21 at 18:47

Dov Rine

810
6
12

Is there any solution to update data on the client slide? – Roman Gavrilov Oct 08 '21 at 18:49
1

Did you see this? https://apidocs.klaviyo.com/reference/javascript-client-library – Dov Rine Oct 08 '21 at 20:22

score 1 · Answer 2 · answered Dec 04 '21 at 17:47

Putting you private key in a browser is a terrible idea. It allows ANY visitor to your website to then be able to access all of your admin API.

Klaviyo explicitly does not support CORS on the API requests for exactly this reason. See Klaviyo's response to a similar question here. https://community.klaviyo.com/apis-40/does-klaviyo-api-support-cors-requests-704?postid=2253#post2253

The correct way to do this is to have a server that you control make the requests to Klaviyo's api. You can make requests to your server from the JS.

Access to fetch has been blocked by CORS policy - Fetch() JS issue

2 Answers2