I have an AngularJS/Cordova app which polls a JSON service on a remote server:
$http({method: 'GET', url: 'http://example.com/index.php'})
Developing in the browser and running off my intranet apache server (http://dev) I get "No 'Access-Control-Allow-Origin' header is present" so I fix this by adding:
Header set Access-Control-Allow-Origin "http://dev"
All works fine, and I see Origin:http://dev in my Chrome dev tools.
So, having to think about this for the first time, I wonder what the Origin will be when the app runs in the Android/iOS webviews. I decide to do a build and deploy on my devices and expect to see the same error in remote debugging (Safari for iOS and Weinre for Android), but to my surprise it works (without sending any CORS headers)! I also find that in both devices the app runs in the webview under the file:// scheme, rather than (what I assumed) a http server of some sorts provided by the phone OS.
So research seems to suggest that CORS is not required for file:// - such a "site' may access any XHR resource on any domain. But, when I test this on desktop browsers I find that while Safari does not need CORS for file:// but Chrome does, and FireFox works either way without CORS
So my questions:
1) why is my app working without CORS in Android/iOS - is it because CORS does not apply to file://, or, is Cordova doing something to make it work in the device?
I have <access origin="*"/> in my config
2) if, pending answers to Q1, I should want to be on the safe site and explicitly allow requests from apps, what value do you give Access-Control-Allow-Origin for file:// "hosts"? in my debugging there is no Origin header in the requests from file://
3) in addition to blocking the XHR request to the remote server, Chrome is also blocking my app templates (I'm using separate files), see below. Is this a potential issue with my app, or just a Chrome issue that I do not need to worry about?
XMLHttpRequest cannot load file:///Volumes/projects/phonegap/www/templates/tabs.html. Cross origin requests are only supported for HTTP.
There are two ways for CORS headers to signal that a cross-domain XHR should be allowed:
sending Access-Control-Allow-Origin: * (allow all hosts)
put the host you would like to allow into the Origin header by your backend
As for the file:// URLs they will produce a null Origin which can't be authorized via the second option (echo-back).
As mentioned:
Cross-domain policy does not apply to PhoneGap (for a variety of reasons, basically because your app is essentially running off the file:// URI on-device).
Please be aware that you will have to set up a whitelist for your apps to access these external domains.
As for the Chrome problem, which can be seen in the developer's console:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/2.html
XMLHttpRequest cannot load file:///C:/2.html. Received an invalid response. Origin 'null' is therefore not allowed access.
there was a discussion on Chromium project's issue tracker, #40787. They mark the issues as won't fix as that behaviour is happening by design.
There is a workaround proposed to simply switch off CORS in Chrome for development purposes, starting chrome with --allow-file-access-from-files --disable-web-security
e.g. for Windows
`C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security`
Here is some more cordova related answer:
CORS and phonegap apps
Domain whitelisting in Apache Cordova - a security model that controls access to outside domains.
Check these resources for more info on CORS:
Cross-Origin resource sharing and file://
A nice CORS tutorial: http://www.html5rocks.com/en/tutorials/cors/
Working around origin policy
HTTP access control (CORS) (Mozilla)
Check also Browser support for CORS:
http://caniuse.com/#feat=cors
And for the record formal CORS specification on W3C :)
Related
We have a test environment on a public site. There we use --disable-web-security flag on chrome for the testers to bypass CORS errors for public service calls during manual test phase. And also we have localhost requests on the agent machine. However today with Chrome 98 update we started struggling with the network requests targeting localhost.
The error we get is for the localhost requests from a public site:
Access to XMLHttpRequest at 'https://localhost:3030/static/first.qjson' from origin 'https://....com' has been blocked by CORS policy: Request had no target IP address space, yet the resource is in address space `local`.
The site on localhost is configured to return Access-Control-Allow-* CORS headers including "Access-Control-Allow-Private-Network: true".
And also I do not see any preflight request. Just one GET request with CORS error on it.
We suspect this might be a side effect caused when you disable web security by --disable-web-security. It might be preventing obtaining of the target IP address space. Our assumption is based on the CORS preflight section on https://wicg.github.io/private-network-access/
3.1.2. CORS preflight
The HTTP fetch algorithm should be adjusted to ensure that a preflight is triggered for all private network requests initiated from secure contexts.
The main issue here is again that the response’s IP address space is not known until a connection is obtained in HTTP-network fetch, which is layered under CORS-preflight fetch.
So does anyone know any workaround for Private Network Access with --disable-web-security flag ?
Or maybe we are missing something. Thanks for the help.
Below Steps can help to solve issue in chrome 98, for other browser like edge you need to do similar like chrome.
For MAC
Requestly with chrome version 98. You need to follow following steps :- Run this command on terminal
defaults write com.google.Chrome InsecurePrivateNetworkRequestsAllowed -bool true
Restart your Browser, Not work then restart your machine
For WINDOWS
Run 'regedit' to open windows registry (If permission issue came then run that command with Admin command prompt)
Go to Computer\HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome
Create new DWORD value with "InsecurePrivateNetworkRequestsAllowed" Name
Change Value to "1"
Restart your Browser
LINUX
for linux users you have to create a policy file in this path:
mkdir -p /etc/chromium/policies/managed
# for chrome you should change the path to this
# /etc/opt/chrome/policies/managed
and then create a new json file for policies:
cd /etc/chromium/policies/managed
touch dev_policy.json
and put this content in it:
{
"InsecurePrivateNetworkRequestsAllowed": 1
}
for chrome:
{
"InsecurePrivateNetworkRequestsAllowed": true
}
that is it, next time you start chrome on your machine it will load this new policies.
p.s. you can check if the policies are correctly loaded in here: chrome://policy/
I currently work on a React-Native mobile app.
The requests to the server API using fetch works fine, but when I open the "Debug JS Remotely" with Google Chrome, it creates some kind of localhost server and the calls are made from it, and I get the following error from the server API:
XMLHttpRequest cannot load https://my.server.com/data. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.
It's pretty annoying not to be able to track the requests to the server in debug mode.
Any of you have faced a similar issue and do you have a way around it?
Thanks
I actually found a solution: I installed the Chrome extension Allow-Control-Allow-Origin:*
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
For react-native change your debug url in chrome http://localhost:8081/debugger-ui/ with http://192.168.xxx.xx.xip.io:8081/debugger-ui/
Ex: http://192.168.10.112.xx.xip.io:8081/debugger-ui/
OR
Add
mres.setHeader('Access-Control-Allow-Origin', '*');
to
/node_modules/metro/src/Server\index.js
Team,
I am working on Angular JS application. When I want to test the app, I used to just launch the application directly into the browser from file system. The url would be like
file:///Users/easwar/AngularApp/index.html
When I need to launch the app in Chrome, I need to open the browser from terminal using the below command
open -a Google\ Chrome --args --disable-web-security -–allow-file-access-from-files
to avoid the below error.
"XMLHttpRequest cannot load , Cross origin requests are
only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource."
But surprisingly in Safari the app works fine without doing anything like this.
I would like to find what is the difference between these browser behaviors? Why its working in Safari and its not working in Chrome without a tweak?
In short: google chrome doesn't like local cross calls.
More found here: Cross origin requests are only supported for HTTP but it's not cross-domain .
It's Googles privacy and security policy: they try to avoid as much risks as possible, and local file calling seems to be one of them.
Read more on cross origin requests and how they're handled in Google Chrome here: https://developer.chrome.com/extensions/xhr
If you don't want to use those console commands, you might want to look for a webserver to host it (or a local webserver).
I'm working in Sencha Touch Framework of cross mobile platform, I'm running my project in mac os x localhost, I'm trying to get the server's response from requesting through Ext.Ajax.request. I'm getting a typical error of CORS: XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 403
How can I resolve my issue and where exactly I need to put the headers information on server.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
These are the headers I need on my server but I'm still helpless and having the same error from server. My requested website is in Wordpress and I tried jt-cross-domain-ajax plugin to resolve my probelm but I'm unable to do this.
My Server Code:
add_action('wp_ajax_fun', 'myFunc');
add_action('wp_ajax_nopriv_fun', 'myFunc');
function myFunc()
{
// Here I'm currenlty putting the header informatioins
wp_send_json_success("I'm Working");
die();
}
My Sencha Touch Code:
Ext.Ajax.request({
url: URL, // Some url
method: 'GET',
callback: function(options, success, response) {
Ext.ComponentQuery.query('#id')[0].setHtml( response.responseText );
}
});
My Question is how can I resolve my problem and where I should put my information of headers origins and what are the steps to achieve this goal.
You need to put the headers in the PHP file you're sending the request to in your Sencha Touch code.
Your Sencha Touch app will run without issues in actual PhoneGap / Cordova application. Usually this kind of issue can be resolved by lowering down security level of your desktop browser.
However if you really want to emulate your project on your desktop environment, (my favorite method) here are some steps with Google Chrome browser:
Completely quit your Chrome browser.
Open your Terminal. Just type this command.
open /Applications/Google\ Chrome.app/ --args
--disable-web-security
Re-run your Chrome. If chrome security is successfully disabled, you should see yellow warning bar at the top of the chrome view.
Open your Sencha Touch project by opening its index.html
That's all. You won't get 'Access-Control-Allow-Origin' issue anymore.
UPDATE:
Recent Google Chrome updates (version 49.0.2623.87) in Mac OSX still gave me CORS issue, even though I ran through above command. I had to specify --user-data-dir additionally in order to overcome it. Now it should be:
open /Applications/Google\ Chrome.app/ --args
--disable-web-security --user-data-dir=~/ChromeUserData/
If possible I would have the services running locally during development so I can hit them there ,then once your application is packaged as a native app with Cordova or PhoneGap you will not have any issues making Ajax requests to any domain (because the Ajax request won't be done by localhost domain). Also research about CORS and JSONP to make cross domain Ajax Requests.
What is best-practice way of consuming a SOAP web service in Firefox OS?
Are there any Firefox OS specific issues I should pay attention to or it comes down to a problem of consuming a web service from JavaScript (where I can use JQuery AJAX or similar)?
There shouldn't be any Firefox OS-specific issues - if/when you could make it work in a browser (preferably a Firefox browser, that is) then it should work just fine in Firefox OS, too.
Although one issue might arise, if the SOAP service doesn't serve CORS allow-origin headers, in which case your XMLHttpRequest would fail as the OS won't allow cross-origin XHR-s. You could overcome this by creating a Privileged application, that requests in the webapp manifest the SystemXHR permission, in which case you are allowed to make cross-origin requests to remote services, regardless of CORS headers.