- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I am done developing my first hybrid app. It runs smoothly in localhost. But when I tried to make it live, I got this error.
XMLHttpRequest cannot load https://www.example.com/app/login.php. ;No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.
Why is this happening?
Here is my sample set up on my ajax request:
$.ajax({ type: "POST", url: "https://www.example.com/app/login.php", crossDomain: true, dataType: 'json', data: $.trim(frm.serialize()), timeout: 10000, beforeSend: function() { $('#loader').css({ display: "block" }); }
....
Then on my php server code:
<?php header('Access-Control-Allow-Origin: *'); header('Content-Type: application/json'); header('HTTP/1.1 200 OK'); //more code here.. { echo json_encode($result_array); }
What should I do to resolve this error? Thanks!
- Tags:
- HTML5
- Intel® XDK
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
The whitelisting rules apply to all html files, but only if they include cordova.js. Please read the article I pointed you to, multiple HTML files is not a good idea, especially if you are new to Cordova. Rewrite your app as a single index.html file, just like the samples, do not try to build a multi-page HTML app, you'll just end up swimming against the tide.
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Update: In firefox this is the console log error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource athttps://www.example/app/login.php. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I have search on the net. And found out that there's no need to add header to my webserver. And I have a feeling that this may cause because of the whitelisting(any guide?) and setup of the config.xml. Any guide?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
See the whitelisting doc pages > https://software.intel.com/en-us/xdk/docs/using-cordova-whitelist-rules-with-intel-xdk < You may have to add some CSP to your app's index.html page, as well as whitelists to the build settings. If you are using jQuery, you should switch to version 2 of the library, not version 1 > https://software.intel.com/en-us/xdk/faqs/app-designer#ajax-jquery-one-fail <
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Paul F. (Intel) wrote:
See the whitelisting doc pages > https://software.intel.com/en-us/xdk/docs/using-cordova-whitelist-rules-... < You may have to add some CSP to your app's index.html page, as well as whitelists to the build settings. If you are using jQuery, you should switch to version 2 of the library, not version 1 > https://software.intel.com/en-us/xdk/faqs/app-designer#ajax-jquery-one-fail <
"You may have to add some CSP to your app's index.html page" - Hi Paul, Thank you for replying.. Do I need to add CSP as well to my other html pages? I have different html page(index.html, login.html and user.html). I added CSP all of them. Here is my CSP code.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://example.ph/app/ 'unsafe-eval' data: blob: filesystem: ws: gap: cdvfile: https://ssl.gstatic.com *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; child-src *; ">
What is the best way to test my app? Because I am trying to run in on my google/firefox browser, to the simulate tab of intel xdk and I also try it installing on my andriod device. All have differents ajax error.
Firefox and Intelxdk Simulate tab: 500 Internal Server Error
Google Chrome: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.
On installed andriod phone: ParseError.
Any guide on this? I will try to upgrade my jquery lib and then I will post update. Thanks.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Other information.. I have check the version of my jquery lib and found out that it is version 2.2.3
<script type="application/javascript" src="lib/jquery-2.2.3.js"></script>
I did the whitelisting like the attached image. I have question regarding this:
- If my site is https://www.example.ph. Do I need to exclude the 'www' in the domain?
- I put https://example.ph on the whitelist but the ajax request url is https://example.ph/app/login.php. Do I need to change the https://example.ph to https://example.ph/app on the whitelist ?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
See the whitelist plugin doc page for additional background on how to set the whitelist URLs. The whitelist rules should match what you use in your AJAX calls, if you call https://www.example.ph then that is what should be in your whitelist. This is what those rules are generating in the config.xml files > https://cordova.apache.org/docs/en/latest/guide/appdev/whitelist/ <
You need to test this stuff on a real device with a built app, there is no other way to test it thoroughly and really know what works.
You should build a single-page app, multi-page apps do not work well in the Cordova context. See this article > https://cordova.apache.org/docs/en/latest/guide/next/index.html < you may be losing the whitelist rules after switching away from index.html as a result of switching to a new page, you are also incurring overhead, because you have to reinitialize the Cordova subsystem with each new page, meaning you have to include the cordova.js file in each one.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Sorry but it's not clear to me about this whitelisting.
I have different file on web server like:
- https://www.example/app/login.php ;
- https://www.example/app/verify.php
- https://www.example/app/data.php
I use these on my ajax request url's eg:
$.ajax({
type: "POST",
crossDomain: true,
url: "https://www.example.ph/app/login.php",
So, on my whitelist should it be https://www.example.ph, https://www.example.ph/app/ or https://example.ph
Again.. sorry for asking a newbie question. Thank you!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Please see the examples in the documentation > https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/ <
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi Paul, Thank you for assisting!
If I have this 3 html pages on my app it is possible to add config file to login.html and user.html? Like does the index.html have for whitelisting? If so which file should I consider to edit/add whitelist for login and user.html (attached image)? Or do I need to add config file for each html pages?
<author>Intel XDK</author>
<content src="index.html"/>
Is it possible to change this <content src="index.html"/> to <content src="login.html"/> ? Let me know any information I need? Thank you so much!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
The whitelisting rules apply to all html files, but only if they include cordova.js. Please read the article I pointed you to, multiple HTML files is not a good idea, especially if you are new to Cordova. Rewrite your app as a single index.html file, just like the samples, do not try to build a multi-page HTML app, you'll just end up swimming against the tide.
![](/skins/images/7FC17B7B85029576C25F1E43CE255B51/responsive_peak/images/icon_anonymous_message.png)
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page