[Fixed]-Angularjs not working in Chrome but working in Firefox

by

1👍

✅

After hours of search I managed to solve the problem.
I just changed 

<script src="http://givemecoupon.com:8000/static/js/app.js" type="text/javascript" charset="utf-8" async defer></script>

to:

<script src="http://givemecoupon.com:8000/static/js/app.js" type="text/javascript"></script>

it was SublimeText snippet that created the first code which caused the problem.
It looks the async is what causes the AngularJs to not work in Chrome & break the whole script!

Asynchronous execution <script async>
Don’t care when the script will be available? Asynchronous is the best of both worlds: HTML parsing may continue and the script will be executed as soon as it’s ready. I’d recommend this for scripts such as Google Analytics.

Then after fixing the Async problem I got CORS error

XMLHttpRequest cannot load http://givemecoupon.com:8000/api/?format=json&slug=arduino-sbs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.givemecoupon.com:8000' is therefore not allowed access.

Which I solved by the help of https://github.com/ottoyiu/django-cors-headers/
by adding these lines to the settings.py file:

INSTALLED_APPS = [
    #django generated
    #3rd party
    'rest_framework',
    'corsheaders', #manage Cross-side API requests
    #my apps
]

MIDDLEWARE = [
    #cors headers
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    #django generated
]

# CORS allow anyone to get API calls
CORS_ORIGIN_ALLOW_ALL = True
👤Mohamed El-Saka

Leave a comment