What is "Script Error" in JavaScript?
This Script Error is thrown by the browser when an error is originated from a JavaScript file which is from a different origin(Different Domain, or protocol). It is hard for us to find because even though the error is occuring we cant find where the error is from and what the error.
Consider the below HTML document to gain a better understanding of this error.
!doctype html>
<html>
<head>
<title>check.com/test</title>
</head>
<body>
<script src="http://new-domain.com/app.js"></script>
<script>
window.onerror = function (message, url, line, column, error) {
console.log(message, url, line, column, error);
}
func();
</script>
</body>
</html>Here we have the function func that is declared as a single function whose invocation will throw us the Reference Error.
When this document is loaded into the browser and JavaScript is executed, the following is displayed on the console (we have logged the error via window.onerror).
If we encounter this bug, we should realize that it isn't a JavaScript error, rather, the browser hides the errors due to security reasons that originate from the script files.
For this reason, browsers treat the error window.onerror as originating from the same domain. Clearly, a problem has occurred, but it isn't clear why one has occurred.
Possible Reasons
JavaScript files are mostly served from the different hostname.
Using third party JavaScript library.
Using the libraries that are served from the cdn.js or google hosted libraries and CDN.
Possible Fixes
We can also change this by adjusting the HTTP headers of scripts that our web application is consuming, but in some cases this method doesn't work. So it is better to use try/catch. To get described results follow the below method:
1.Adding a Cross origin HTTP header
Access-Control-Allow-Origin: *Cross origin Resource sharing known as CORS is a set of APIs that commends how the files to be downloaded and served across others by setting Access-Control-Allow-Origin: * this we can tell the browser that any origin can fetch this file.we can also restrict it to the known origin
Access-Control-Allow-Origin: https://www.helloworld.com2.Add a Crossorigin= "anonymous" script attribute
<script src="http://new-domain.com/app.js" crossorigin="anonymous"></script>This can tell the browser that the target file only be fetched anonymously i.e. no potential user identifiable information like cookies or HTTP credentials will be only transmitted to the server by the browser
Conclusion
This errors occurs when client side Script that violates the origin policy of the browser by making the cross-origin HTTP request.
Depending on the browsers that users are running this errors changes.In the browsers mentioned below the script tag is present and the HTTP header also need to be present.if any one its is not there the script will get blocked
- Chrome 30+
- Firefox 13+
- Opera 12.50+
- Safari (atleast 6+)
- Edge 0.10+
+1-415-800-4104
