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.
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.
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:*;"
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.
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.
Related
Hello Developers,
thanks for being helpful on all-time.
I'm working on a project it's working fine on Web Navigator Chrome,
but when I build the Android App using react-native, I found that I can't send requests to my server with any of Axios or fetch.
catch is always send
Error : Network Error, but it's working fine with other servers here's some Screenshots :
I can't figure this out, so I expect some help from u guys.
Add this to your android/app/src/main/AndroidManifest.xml and below permission is used for accessing ConnectivityManager.
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
I had this same problem before on Android with React Native.
Here are the steps that I did when debugging it:
Try to use Postman to check if your endpoint is working.
I was using GraphQL so I tested using fetch and axios to see if it returns the same network error.
Test on iOS to see if it works or not.
After I did the above, since I deployed my API app on my own server. I pointed my graphql request to my public IP (http://xxx.xxx.xxx.xxx/graphql) and it works. You might need to add android:usesCleartextTraffic = "true" to your AndroidManifest.xml to make request to http url.
I finally figured out that it was a problem with my SSL certificate that was installed on my domain. I re-installed it back with proper certificate.pem and intermediate.pem and my problem is fixed.
I am using a rest api which has allowed CORS for localhost. When i use the web version of ionic application i get the responses from the server as expected. But when it comes the android emulator
it gives me the following error, My Api only allows either from localhost or from my domain. how to overcome this issue?
**Msg: Failed to load https://myapi.com/GetAllUsersList: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost, *', but only one is allowed. Origin 'http://localhost' is therefore not allowed access.**
Replying to my own question!!
we can change the url capacitor uses, which will change the origin. we can edit the capasitor.config.json with following properties
"server": {
"hostname": "mydomain.com", //in my case this is localhost
"androidScheme": "https"
}
Please use HTTTP plugin for your app check below link
https://ionicframework.com/docs/native/http
I am working on an ionic 3 Project. When i run the project on android i get the following error.
Access to XMLHttpRequest at 'https://baseurl.com/api' from origin 'file://' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'https://baseurl.com' that is not equal to the supplied origin.
I started getting this error from last week monday and until then it was working fine.
In the requests(POST/GET) i am using the following headers
headers.append('Content-Type', 'application/x-www-form-urlencoded');
or
headers.append('Content-Type', 'application/json');
According to the ionic documentation CORS Errors, what i understood was that there are changes has to be done from the server side. Is there anything can be done from the ionic side? What could be the issue?
Two problems with your issue. One is more simple, and one is that https://baseurl/api doesn’t have a .com, or a .anything, so it is mostly invalid. The second that CORS is a necessary evil to deal with. You are going to have to set up a local server do deal with it, as some requests cannot be made by items being served by a file:// protocol. Local servers can be set up a variety of ways, depending on your situation. It would be helpful to explain how you are running it, and what tools you are using, so that we may be able to better help you.
The issue is due to a chrome update and for further details about the issue please refer This.
Update the 'Android System Webview' in google play store to the latest version and this issue will go away
I have an ionic app that when I run that on iOS then it works perfectly fine but when I run that on Android I get this error
Http failure response for (unknown url): 0 Unknown Error
Any reason I am getting this one? I have allowed CORS on server side as it is working on iOS devices.
Any help?
EDIT
This is what I have in my app.js file
const cors = require('cors');
And then I simply use it with default options.
app.use(cors());
If you are using localhost, change it to the IP address of the localhost. Android doesn't seems to support it where iOS do.
Try actual host name in case it didn't work too.
First you dont need CORS to call API from your android device.
Second probably your server is not accepting your request. If you are using Cloud then your server must accept request from any IP. There must be a option for allow IP address, place there from 0.0.0.1 to 254.254.254.254 so that each and every user can call your API.
Third you need to allow origin from your config.xml and also in header for CROS request. Check your API header and config file.
And fourth If your service is running under http then it will also could be the problem. Secure your service by adding SSL certificate. This could fix your problem.
We had experienced the same Error several times in our App. In our case it was a problem with the headers of the request and also a CORS problem on the serverside.
Are you able to reproduce this error in the browser if you emulate a android device? Then you could compare them with the headers of the iOS request.
Or you can try to log the incoming requests on the server-side to see if the requests reach the server and what headers are set.
Hope my ideas help :)
The solution is to add NODE_TLS_REJECT_UNAUTHORIZED=0 to your environment to disable the SSL verification in Node.js.
Note : You should only set this in development, Don't do this in production
EDIT
In that case it indicates that CORS has not been properly setup on your server. Go through the issue here
I have packaged a Sencha Touch 2 app with PhoneGap for Android. I can't get the ajax requests to work on my native application. When I handle the request through the browser on http://mydomain.com/mysenchaapp/android/assets/www/ it works fine, however, when I run my app through the emulator as a native app my request fails. I think it would be helpful if I could get fiddler to work on handling native apps' request as well, but I haven't been able to figure that out either. Any help is appreciated.
On a native application you can use cross-domain get requests without using JSONP. I got it to work. My problem accessing the servlet was another issue.
You can't use Ajax for Cross-Domain GET requests, you should use JSONP instead. Take a look at the documentation for Ext.data.JsonP.request(), You can however use Ajax to make a post if i'm not mistaken. This comes in handy when uploading something like a base64 string (which is too big for a GET request)