8 Replies Latest reply on Aug 11, 2016 12:12 AM by xkevin

    No 'Access-Control-Allow-Origin' issue on live Hybrid App

    xkevin Level 1

      I have an issue about testing my hybrid app live. When the app request to the server it will throw an error.

      This is the error using google chrome: 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.

      Tried in firefox, this was the error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.example/app/login.php. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

       

      When I was developing and testing it on my localhost (offline webserver) it has no error. It is running smoothly. What is the possible cause and solution for this?

      On my php webserver I added a  Access-Control-Allow-Origin header:

      Like this:

      <?php
      header
      ('Access-Control-Allow-Origin: *');
      header
      ('Content-Type: application/json');
      header
      ('HTTP/1.1 200 OK');

      ?>

       

      On my ajax request I do it like this:

      $.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"
        
      });

      ...
       
      }

       

      Am I missing something here? What/how should be the setup of my webserver or app to enable them to communicate?

        • 1. Re: No 'Access-Control-Allow-Origin' issue on live Hybrid App
          VectorP Level 4

          What/how should be the setup of my webserver or app to enable them to communicate?

          Nothing. There is no CORS problem when connecting your app using ajax/xhr to a server.

          However, you said: "This is the error using google chrome", which is different from using a regular device with the app installed.

          • 2. Re: No 'Access-Control-Allow-Origin' issue on live Hybrid App
            xkevin Level 1

            VectorP so it doesnt need to add header('Access-Control-Allow-Origin: *'); on my webserver? Why I got this error? I try to install it as well on my andriod phone and the app seems not communicating to my webserver.

            • 3. Re: No 'Access-Control-Allow-Origin' issue on live Hybrid App
              VectorP Level 4

              You don't need that header, at least not for communication with your app (there may be other reasons to have it, for instance if your web service is also used by websites at other domains).

               

              If the ajax communication fails, there should be other reasons, for instance wrong whitelisting, failure to reference cordova.js in your html, or failure to wait for the deviceready event to fire before attempting to make an ajax request.

              Let's start with the former. Could you please:

              - post your config.xml

              - confirm that both config and index.html are located in the same (root) directory of your zip

              • 4. Re: No 'Access-Control-Allow-Origin' issue on live Hybrid App
                xkevin Level 1

                AFAIK I don't try to set up/edit this config.xml. I have a feeling that the error is on whitelisting..

                • 5. Re: No 'Access-Control-Allow-Origin' issue on live Hybrid App
                  kerrishotts Adobe Community Professional

                  From what I'm gathering, you're trying to test your app in your desktop browser for a portion of your dev cycle. There's nothing wrong with that (just make sure your acceptance tests are on a physical device), but you will inevitably run into the CORS problem.

                   

                  I'm also assuming that you're loading your app from the file system rather than using a local HTTP server? If so, try using a simple HTTP server and see if the issue goes away.

                   

                  Alternatively, make your Access-Control-Allow-Origin header a little bit smarter -- namely:

                   

                  • Return the actual origin, if available (don't use a wildcard -- this can cause issues down the road if you want to pass credentials)
                  • If no origin is available, return "null".

                   

                  Although CORS is NOT a requirement in most cases when using PhoneGap, it's still useful to get it right, since, as you've seen, testing in a desktop environment becomes trickier. But it's also important for those cases where CORS will be enforced -- like if you add WKWebView on iOS.

                  1 person found this helpful
                  • 6. Re: No 'Access-Control-Allow-Origin' issue on live Hybrid App
                    xkevin Level 1

                    kerrishotts VectorP Thank you for answering my questions. I think I mistook on using whitelisting. I tried to install my app on my andriod phone. The error is I am not able to connect or communicate with my web server. The error is undefined. Searching a lot on the net, and I found out that the best way to develop hybrid app is using only one html page. My bad, I have this 3 html pages(index.html, login.html and user.html).

                    This is what I did.

                    index.html -> check the user token from LocalStorage. If exists connect to server and asks if it is existing. If exists get user details is user is valid then redirect to user.html. If nothing exists/ user not valid redirect to login.html.

                    login.html -> to login the user. If login credentials are valid redirect to user.html.

                    user.html -> Show all users data / infos.

                     

                    • So the config.xml(whitelist) is just for the index.html, Am I right?
                    • It is possible that I will include the whitelist of login and user.html to config.xml? So that the login page can communicate as well to the server. Sorry for newbie question here. Thank you for giving time in responding my queries.
                    • 7. Re: No 'Access-Control-Allow-Origin' issue on live Hybrid App
                      VectorP Level 4

                      Searching a lot on the net, and I found out that the best way to develop hybrid app is using only one html page.

                      That's not strictly necessary, but it can make life easier. Many Javascript UI Frameworks (like jQuery Mobile) let you create multiple html pages, which will then be transformed at execution time into a one-page application by the framework.

                       

                       

                      So the config.xml(whitelist) is just for the index.html, Am I right?

                      No, you can whitelist for every html document again (and use any plugin in those documents, too, for that matter). You should, however, include the cordova.js reference every time.

                      If you have index.html in your root and other html documents in a subdirectory, this is the only situation where you must reference cordova.js and not phonegap.js

                      Those two are different, since phonegap.js won't find the plugins from a subdirectory.

                      1 person found this helpful
                      • 8. Re: No 'Access-Control-Allow-Origin' issue on live Hybrid App
                        xkevin Level 1

                        Sounds hopeful to me. I will just pursue on this app(with different html files). Maybe I will rewrite it in one html in the near future. Thank you for the help! Thanks for this forum.