OpenCart Throws JS Error 'Cannot Read Property "document" Of Null' When Hosted
When I'm trying opencart on my local, it seems that it's working fine. But when I uploaded to the hosting/server, some errors appear, please see below:
Uncaught TypeError: Cannot read property 'document' of null
f.each.contents @ jquery-1.7.1.min.js:3
e.extend.map @ jquery-1.7.1.min.js:2
f.fn.(anonymous function) @ jquery-1.7.1.min.js:3
(anonymous function) @ crossdomain.php?session_id=66e844dc45af19ce293981cdd9b22b67:566
n @ jquery-1.7.1.min.js:2 o.fireWith @ jquery-1.7.1.min.js:2
e.extend.ready @ jquery-1.7.1.min.js:2
c.addEventListener.B @ jquery-1.7.1.min.js:2
What seems to be the problem? Because in my local, these errors doens't appear. Thanks.
Answer
One big difference between running hosted and running locally is the security treatment of network calls. The reference to crossdomain.php in your stack trace suggests that you're running into this.
If so, then there are two possible solutions:
If you're running in Flash: You need to host a crossdomain.xml file at the root of the remote domain that grants permission to the local domain (or, as in this example, everyone):
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
This file must always be at the root of the remote domain, e.g., http://something.com/crossdomain.xml .
If Flash is not involved, then CORS is the security mechanism responsible for blocking this call, and you need to configure the remote web server to add an Access-Control-Allow-Origin header to the response to the URL you're reaching out to.
Access-Control-Allow-Origin: *
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM