Solved

url has been blocked by CORS policy

  • 1 March 2023
  • 6 replies
  • 831 views

Badge +1

I know I am not the only one with this problem and I have already read many articles on the subject in the last two days, especially in this community. Unfortunately, I have not yet found a working answer for my case. Therefore I try to post my code here and hope for help.

I am trying to add a profile to a list using fetch(). The site is ssl secured. 

Here is my code:

 

const api = "123456789123456789";
const list_id = "LIstId";
const url = `https://a.klaviyo.com/api/v2/list/${list_id}/members?api_key=${api}`;


var myHeaders = new Headers();

myHeaders.append("Accept", "application/json");
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Access-Control-Allow-Origin", "*");



var raw = JSON.stringify({
"profiles": [
{
"first_name": "Henry",
"last_name": "Dust",
"email": "henry@dust.com"
}
]
});



var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};




fetch(url, requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error))

But all i get is:

Access to fetch at 'https://a.klaviyo.com/api/v2/list/ListId/members?api_key=123456789123456789' from origin 'https://liveurl.com' has been blocked by CORS policy

 

Any help is appreciated, I'm stuck here for 2 days now.

 

Thank you

icon

Best answer by maxchauandzen 3 March 2023, 00:14

View original

6 replies

Userlevel 2
Badge +6

I know you’re going to read this and say “No, I know that isn’t the problem” but here we go:

Most of the CORS issues are with SSL certificate issues.  Since this just ‘started happening’ without any code or API changes then an old expiring SSL cert could explain it.  

If you have a certificate for the main subdomain but it isn’t configured for base or wildcard, or if there is an expired certificate on an account that is configured for the base URL.  I know “I’ve checked this 1,000 times” but just do it again and remove any expired certificates, see if it changes things….

Badge +1

the SSL certificates are new and configured for the main subdomain. Nevertheless, I have now renewed them again. But nothing happens still get the same error

Userlevel 2
Badge +3

Hi @Demian, is this code running on you browser or in your server?

If it’s running in the browser:

The CORS issue sounds like your webserver is telling the browser to not allow Cross Site stuff, but your fetch is trying to do Cross Site Stuff.

The Access-Control-Allow-Origin rule should be set externally at the server and sent to the browser. And shouldn’t be included for your client side fetch.

If it’s running in the server:

Something else is happening, but the Access-Control-Allow-Origin rule probably doesn’t need to be sent in the fetch.

Badge +2

Hi Demian,

You may try doing that like how we did with the legacy form seemingly.

https://help.klaviyo.com/hc/en-us/articles/115005249588-How-to-add-and-customize-a-legacy-embedded-sign-up-form

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

var urlencoded = new URLSearchParams();
urlencoded.append("g", "LISTID");
urlencoded.append("$fields", "email, $first_name, $last_name");
urlencoded.append("email", "your@sample.com");
urlencoded.append("$first_name", "First");
urlencoded.append("$last_name", "Last");

var requestOptions = {
method: 'POST',
headers: myHeaders,
body: urlencoded,
redirect: 'follow'
};

fetch("https://manage.kmail-lists.com/ajax/subscriptions/subscribe", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

Hope it helps!

Badge +1

Hi Demian,

You may try doing that like how we did with the legacy form seemingly.
 

Hope it helps!

 

I have just tried your suggested solution. At first sight it seems to work, the Cors errors are gone and I get the following message in the console:

{"data": {"is_subscribed": true}, "success": true, "errors": []}

On the second look I still have the same number of users in the list, also no list was updated.

Badge +2

Hi Demian,

You may try doing that like how we did with the legacy form seemingly.
 

Hope it helps!

 

I have just tried your suggested solution. At first sight it seems to work, the Cors errors are gone and I get the following message in the console:

{"data": {"is_subscribed": true}, "success": true, "errors": []}

On the second look I still have the same number of users in the list, also no list was updated.

It looks like when is_subscribed is true meaning the subscriber is already in the list. Would you like to try another email address?

Another tips is to check the double opt-in option. Since it would be treated as a normal subscription, it follows the single/double settings as well.

Reply