7

I have started building simple Todo app in Ionic 1 and I discovered a problem with Origin header. (CORS related)

If i run

ionic serve

everything works fine in browser and i can make requests to my REST API on apache(tomcat). But when build my app for android or even in ionic viewer, all requests fail. Using a chrome debugger I managed to locate the problem.

Native app sends header (tested only on android)

Origin: file://

which causes my server to deny requests. Seems to me that it should send correct Origin header with host. Screenshot with more details is attached below.

Problem illustration

What can I do about that?

Found related topic here: CORS, Cordova, AngularJs $http and file:// confusion

Already posted here, with no luck: https://forum.ionicframework.com/t/native-app-is-sending-header-origin-file-which-causes-problems/62388/1

EDIT: Problem occurs when post, if I run ionic starter (tabs) template with only $http.post('http://myapp.com/apiv1/device') added to controller.

Community
  • 1
  • 1
johnymachine
  • 781
  • 2
  • 7
  • 28

3 Answers3

2

Try adding the following to your allowed origin request: "file://* filesystem: "

I had the same problem with <iframes> in Ionic and I fix it adding: 

Header set Content-Security-Policy "...; frame-ancestors 'self' file://* file://*/* filesystem: http://localhost:*;"
Alexander
  • 90
  • 1
  • 3
  • 11
  • Where to put this code because I have problem X-frame Options same origin Ionic 3 –  Apr 29 '18 at 14:24
  • In my project we are using "Apache Tomcat", so this configuration must be in "httpd.conf" of your project. In my case "myProjectName.conf". If you are not using Apache Tomcat, you have to find how to write that config in the server type than you are using. Here you have some examples: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options#Examples – Alexander May 02 '18 at 12:21
  • I have config.xml should I implement there or to use the Apache Tomcat. –  May 02 '18 at 16:11
  • That config was written for Apache Tomcat, must be in a _file.conf_ But if you prefer to use a _file.xml_, basically you will have to write the same but in another format. For example, in my project we have 4 files "web.xml (global), httpd.conf (global), projectName.xml and projectName.conf" I recommend to write in projectName.conf, because in my opinion its more easy to read and mantain. Remember to check if your Apache version supports CSP. Greetings! – Alexander May 02 '18 at 19:01
  • I am using ionic cordova but I dont have Apache Tomcat I am new at the ionic can you give me an example or something, i would appreciate that. –  May 02 '18 at 21:07
  • Okay, 1 - You are using only Ionic Cordova? 2 - Which do you have in the backend? 3 - What kind of error with X-Frame do you have? – Alexander May 03 '18 at 03:34
  • Refused to display a frame because it set 'X-Frame-Options' to 'sameorigin' this error. and here is my question you can see. https://stackoverflow.com/questions/50028938/refused-to-display-a-frame-because-it-set-x-frame-options-to-sameorigin –  May 03 '18 at 06:27
  • How to set origin in case of android device. I am using ionic v1 and it send Origin as file which cause refuse of request from payment gateway – Sunil Rawat May 03 '18 at 10:19
  • @AZH I did respond your question :) – Alexander May 03 '18 at 13:17
  • @SunilRawat By default Ionic will send "origin: file://" and it CAN´T be changed. You have two options: 1 - Change the backend for accept origin " file://* ". 2 - Create a proxy who changes the headers. I spent like 4 days investigatin about that and that 2 options was the best. – Alexander May 03 '18 at 13:20
  • Hi @Alexander Can you please provide me some reference where I can get the proxy example for Ionic V1., please I will be great full to you. I did not find even I did lots of research on it. – Sunil Rawat May 04 '18 at 03:39
  • You have to create a proxy in your backend, I never seen a proxy in the frontend. For example, in my project with Apache Tomcat in the file "httpd.conf" we have a configuration called "ProxyPass" who sends to a specific IP the request who comes from another specific URL. – Alexander May 04 '18 at 13:46
  • Example in Tomcat: ` # Get all request in port 80 \n ProxyPass /back/ http://myServer.com:8080/replaceBack \n Header set ... # Here I set headerrs in the response \n ` – Alexander May 04 '18 at 13:49
  • 1
    Perfect! I added only filesystem: in the beginning and it is not working. With file://* it is now working. Strangely this is not mentioned in any official CSP documentation. Thanks alot! – Lonzak Apr 23 '21 at 11:43
1

It seems that the problem comes from the server (specifically from Tomcat).

According to this bug:

https://bz.apache.org/bugzilla/show_bug.cgi?id=60008

The default CORS filter provided by Tomcat (instances/shared/conf/web.xml) doesn't allow POST requests and returns 403. The problem is solved from Tomcat version 8.0.37, so upgrading the server should solve your problem.

Regards.

CapitanMcFly
  • 11
  • 4
1

I've came across this last week. I had to make POST request to JIRA api and I wasn't able to change server configuration. Probably the easiest way is to make your own android plugin which sends POST request. If you send POST request from plugin, there is no Origin: file:// header and everything works fine. The plugin was like 2-3 hours of work.

Eakethet
  • 682
  • 1
  • 5
  • 18
  • can you please let me know how to solve it for ionic v1 – Sunil Rawat Apr 27 '18 at 05:22
  • Look up some tutorial how to write custom plugin for cordova, write plugin which will take care of sending requests, so it takes as parameters url, data, some headers (in my case, i dropped headers, used just authentication header) and it will return the response. So, phase 1 - how to make custom plugin for ionic/cordova, phase 2 - look for some http async request in android, it was kids stuff – Eakethet May 03 '18 at 07:10
  • If its a kids stuff so please solve this issue. Ionic native app is sending header Origin:file:// which causes problems And , I will pay you for that whatever you want? – Sunil Rawat May 03 '18 at 10:26
  • @SunilRawat Im quite out of time, the only thing I can do is to show you some parts of my code for the plugin and integration (works same as native http client .post() – Eakethet May 03 '18 at 12:23
  • ok , thanks mate. Actually everything working fine only I need to set Origin as some domain name instead file:// – Sunil Rawat May 03 '18 at 12:26
  • @SunilRawat I am facing same issue can you please help me on it? – pankaj Apr 10 '20 at 06:39