No 'Access-Control-Allow-Origin' header issue

[xkevin]

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!

[xkevin]

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)

[xkevin]

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? 

[PaulF_IntelCorp]

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 <

[xkevin]

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.

[xkevin]

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 ?

[PaulF_IntelCorp]

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.

[xkevin]

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!

[PaulF_IntelCorp]

Please see the examples in the documentation > https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/ <

[xkevin]

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!

[PaulF_IntelCorp · Accepted solution]

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.