Solved

CORS policy: No 'Access-Control-Allow-Origin'

  • 1 June 2021
  • 9 replies
  • 8253 views

Badge +2

blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

icon

Best answer by jallain 1 June 2021, 15:32

View original

9 replies

Userlevel 4
Badge +11

Hello @Mulastore , if you need help with an API request can you share some more information please? When are you getting this error? Are you trying to send a particular request to Klaviyo’s API? Can you share the endpoint you are using and some more information about what you are trying to do? Thanks.

Badge +2
This is the error that appears in the browser console when you click on "Subscribe" in the newsletter widget.

Access to XMLHttpRequest at 'http://manage.kmail-lists.com/ajax/subscriptions/subscribe' from origin 'http://demo2. has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Userlevel 4
Badge +11

@Mulastore it looks like you are using HTTP as the URL for sending the request to when it should be using HTTPS, was there a reason you were using HTTP? Can you try with HTTPS and see if that helps?

Badge +2

Hello I have added below code

<script>
var settings = {
  "url": "https://a.klaviyo.com/api/v2/list/YwvFLh/members?api_key=pk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxemails=xxxxxxxxxx@gmail.com",
  "method": "GET",
  "timeout": 0,
  "headers": {
    "Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOm51bGwsImlzcyI6InJlVHVHdS1BVHhlaDZ0OVpGaUgxQ2ciLCJleHAiOjE2NzI0NzE3NDAsImlhdCI6MTU5OTk3ODc2NH0.Ct4MZ_r0Uy4bE3EvutB22YZHFbc2-Z7D_r9v6x1SW6k"
  },
};

jQuery.ajax(settings).done(function (response) {
  console.log(response);
});
</script>

Still I am getting error please help for this

Userlevel 4
Badge +11

@guptaanjali538 you should edit your post to remove sensitive credentials such as your Klaviyo private api key which begins pk_0aa and the Bearer token that you are using as an authorization header.

 

As for why your request is not working, it looks like you are sending more than you need to for the request to succeed. All you need is to send a GET request to:

https://a.klaviyo.com/api/v2/list/LIST_ID_HERE/members?api_key=API_KEY_HERE&emails=EMAIL_HERE

The api_key param is the authorization so you don’t need to send a Bearer token in the headers. You may also want to remove the timeout as that doesn’t seem necessary and may be interfering with the request. Let me know if you are still having trouble after making this adjustment and please include the exact error you are getting if you are still getting one.

Badge +1

<script>

var requestOptions = {
  method: 'GET',
};

fetch("https://a.klaviyo.com/api/v2/list/------/members?api_key=API_KEY&emails=123@gmail.com", requestOptions)
.then(response => response.json())
.then(result => console.log(result))
.catch(error => console.log('error', error));

</script>

same cross-origin issue

Userlevel 4
Badge +11

@Austin The List v2 API only accepts server-side requests and it looks like you are sending them from the front end. See this post for more info: 

 

Badge +1

This is happening because of the CORS (Cross Origin Resource Sharing) . For every HTTP request to a domain, the browser attaches any HTTP cookies associated with that domain. This is especially useful for authentication, and setting sessions. You are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.

JSONP ( JSON with Padding ) is a method commonly used to bypass the cross-domain policies in web browsers. You’re on domain example.com , and you want to make a request to domain example.nett . To do so, you need to cross domain boundaries. JSONP is really a simple trick to overcome the XMLHttpRequest same domain policy. So, instead of using XMLHttpRequest we have to use < script > HTML tags, the ones you usually use to load JavaScript files , in order for JavaScript to get data from another domain.

Localhost

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999

 

Badge

I keep reading a lot of posts when I first get into trouble. This is how I once reached this website ( https://kodlogs.net/313/no-access-control-allow-origin-header-is-present-on-the-requested-resource-jquery ) and got the desired solution. You can read this post as well as visit here. I think it will be very useful for you

Reply