Menu
I'm encountering a cross origin resource sharing (CORS) error when I try to load a webpage with the sample "getting started" javascript code from the segment.io website. Below is the html itself. I haven't set any headers on my play 2.1.3 server that's vending this page, but I assume that's not necessary because other users have assured me they have run this with no problems.:
<html>
<head>
<script type="text/javascript">
window.analytics=window.analytics||[],window.analytics.methods=["identify","group","track","page","pageview","alias","ready","on","once","off","trackLink","trackForm","trackClick","trackSubmit"],window.analytics.factory=function(t){return function(){var a=Array.prototype.slice.call(arguments);return a.unshift(t),window.analytics.push(a),window.analytics}};for(var i=0;i<window.analytics.methods.length;i++){var key=window.analytics.methods[i];window.analytics[key]=window.analytics.factory(key)}window.analytics.load=function(t){if(!document.getElementById("analytics-js")){var a=document.createElement("script");a.type="text/javascript",a.id="analytics-js",a.async=!0,a.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.io/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n)}},window.analytics.SNIPPET_VERSION="2.0.9",
window.analytics.load("**my_key_here**");
window.analytics.page();
</script>
</head>
<body>
</body>
</html>
When I load this page with my browser, I see the following errors on the javascript console:
[Error] Failed to load resource: Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin. (p, line 0)
[Error] XMLHttpRequest cannot load http://api.segment.io/v1/p. Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin. (localhost, line 0)
Any ideas? Even on the segment.io site, there's no mention that CORS should be an issue just to publish events with the javascript client.
948
To get rid of a CORS error, you can download a browser extension like CORS Unblock ↗. The extension appends Access-Control-Allow-Origin: * to every HTTP response when it is enabled. It can also add custom Access-Control-Allow-Origin and Access-Control-Allow-Methods headers to the responses.
If the CORS configuration isn't setup correctly, the browser console will present an error like "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite" indicating that the request was blocked due to violating the CORS security rules.
The error stems from a security mechanism that browsers implement called the same-origin policy. The same-origin policy fights one of the most common cyber attacks out there: cross-site request forgery. In this maneuver, a malicious website attempts to take advantage of the browser's cookie storage system.
If a server attempts to redirect a CORS request to a URL that contains this form of username and password then the request will fail. Typically the server will have returned a status code of 301 , 302 , 307 or 308 and the rejected URL will have been specified in the Location response header.
It could be a browser extension that blocks tracking scripts. Do you have one installed? For example, I was using Disconnect on Chrome and was experiencing a similar error until I whitelisted my site.
The error I was seeing was XMLHttpRequest cannot load http://api.segment.io/v1/i. The request was redirected to a URL ('about:blank') which has a disallowed scheme for cross-origin requests.
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
