Currently, I am working on developing an application using Django and Phonegap. While attempting to send an Ajax Request with the following function:
<script>
$.ajax({
url: "http://192.168.0.101/commerce/product/" + localStorage.getItem("toView"),
type: "GET",
data: {},
success: function (json) {
console.log(json);
}
});
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>Upon executing this code, an error is displayed in the Chrome console:
XMLHttpRequest cannot load . Redirect from '' to '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.
The issue seems to be related to missing or incorrect headers being included. Upon checking the URL in chrome and reviewing the server response, it appears as follows:
HTTP/1.0 200 OK
Date: Tue, 16 May 2017 09:42:29 GMT
Server: WSGIServer/0.2 CPython/3.4.3
Content-Type: application/json
Access-Control-Allow-Origin: *
X-Frame-Options: SAMEORIGIN
Access-Control-Allow-Methods: OPTIONS,GET,PUT,POST,DELETE
Access-Control-Allow-Headers: X-Requested-With, Content-Type
Content-Length: 89
In addition to providing insight into my server code located in views.py:
def product(request, prod_id):
#### SOME CODE
response = JsonResponse(response_data)
response['Access-Control-Allow-Origin'] = '*'
response['Access-Control-Allow-Methods'] = 'OPTIONS,GET,PUT,POST,DELETE'
response['Access-Control-Allow-Headers'] = 'X-Requested-With, Content-Type'
return response
I am uncertain about why this error persists. Any guidance would be greatly appreciated. Thank you.