I started a new job and one of the first projects I was given was to create a mobile app. I’m pretty good at programming websites and figured it wouldn’t be a big deal. Create a mobile friendly website, give customers the link, and all is good.
Nope, didn’t work that way.
I was going along pretty good and things were looking up. The app was coming along nicely and I figured that within a month things would be working. Then I was thrown a curve ball. We needed the app to scan a barcode and also do OCR off a persons ID card. Oh crap.
After some research I found a few SDKs to try. They were working fine but delivering errors when trying to take and process the ID photo. There didn’t seem to be any way to get the errors to stop. After some research it was obvious that a mobile website wasn’t going to cut it and I needed to create a stand-alone app.
A few weeks of testing SDKs we found one that fit our needs and things seemed to be moving along smoothly again. Then . . . .
I decided that it would be easier to build the element that talked to the server and submitted the customer data than it would be to build the user login. So I started. The database was built, a test form was created, and the ajax form submission was tested. Everything worked fine. Now it was time to compile the app in cordova and test it on a cell phone plugged into the computer. Walking through the process of capturing the data from the ID worked fine . . . hit the send data button . . . and . . . nothing. No post conformation, no data sent and no errors. In fact I couldn’t find anything in the debugging logs either. This was weird.
So I looked at the server logs. BINGO! No Access-Control-Allow-Origin allowed. I started reading through all the posts I could find about this error. I found posts about altering the XML setup file in cordova, about using jsonp (which does not allow for POST people!), and lots of other stuff that didn’t work. Was I going to have to go through the issue of using CORS on the server? I didn’t want to and I also didn’t want to do all the setup work and find out that it’s not compatible with older cell phones. (I don’t know if this is true. Only guessing because it’s not compatible with older browsers.)
I gave up on this part of the project for a few days and worked on other stuff.
So after feeling refreshed from the Memorial Day Holiday weekend I figured it was time to give the app another try. This time I setup a sub-domain on the companies production server and not my personal testing server. I created some test files and made sure that everything was working on the server side. Once again running the app produced that dang Access-Control-Allow-Origin error again. Since I was using PHP I figured I would use a simple line of code in the page and attempt to rewrite the headers – header(“Access-Control-Allow-Origin: *”);. And . . . it worked!
I was pleased but also a little surprised. I had tried this same technique on my personal testing server and gotten errors. Perhaps I had done something wrong when testing previously. I copied all of the pages/code to my test server and continued to get errors. I guess the security isn’t as tight on a GoDaddy VPS as I have on my own server. Oh well, glad it worked.
So after spending hours reading through other peoples crap on the Internet, a simple line of code in the PHP file fixed the “no ‘Access-Control-Allow-Origin’ header is present on the requested resource” error.
Is this a major security issue? Hey if anyone wants to process the form and add peoples contact data to our database – feel free to exploit this open security hole. We will gladly take the data!
So now to my next major challenge – getting the authentication token to work so that the app doesn’t ask the user to log in every time they use the app. Arrrgg