Solved

CORS policy while using Javascript Client

  • 18 August 2021
  • 5 replies
  • 192 views

Badge

Hi, I am currently using Klaviyo javascript client to do OnSite Activity like the guide
https://help.klaviyo.com/hc/en-us/articles/115005082927-Guide-to-Integrating-a-Standard-Ecommerce-Platform#active-on-site2

 

When I try to push an identity like this

<script>
var _learnq = _learnq || [];
_learnq.push(['identify', {
'$email': '{{ customer.email }}',
'$first_name': '{{ customer.first_name }}',
'$last_name': '{{ customer.last_name }}'
}]);
</script>

I got a Cors Error
Access to XMLHttpRequest at 'http://a.klaviyo.com/api/onsite/identify?c=xxx' from origin 'http://xxx:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
POST http://a.klaviyo.com/api/onsite/identify?c=QV3wNt net::ERR_FAILED 

I am currently using in my local development and it is a Rails application.

Any idea?

Thank you :) 

icon

Best answer by jallain 18 August 2021, 15:37

View original

5 replies

Userlevel 4
Badge +3

@kh_c It looks like you are trying to make these requests over HTTP but they need to be made over HTTPS.

Badge

@kh_c It looks like you are trying to make these requests over HTTP but they need to be made over HTTPS.

Thanks @jallain .

Yes, the local development is in HTTP but my production is in HTTPS, so I think it will work for production. 

Is this because of this? 
https://github.com/klaviyo/analytics.js/blob/master/analytics.js#L600 

Is there a way to be able to work for local development?

Userlevel 4
Badge +3

@kh_c No I don’t believe so. It looks like it was because the URL you tried to use was:

http://a.klaviyo.com/api/onsite/identify?c=xxx

Can you try making the request but using

https://a.klaviyo.com/api/onsite/identify?c=xxx

 

http vs https

Badge

@jallain Yes I can if I force my dev environment to force ssl. Then my url will be https. It looks like if my localhost url is starting with Https, the javascript will call Https, and if my localhost url is Http then the javascript will call Http. 

Any idea?

Userlevel 4
Badge +3

You’ll have to make the requests over HTTPS for them to work. Whether that is enforcing HTTPS for your dev environment, proxying the requests through an HTTPS layer, or waiting until you are in your prod environment to test the requests. You could also try to make the requests with Postman or something outside of your site just to test that they will work with the structure you are using.

Reply