I have setup the Ionic development environment using Yeoman generator (https://github.com/diegonetto/generator-ionic). Everything is works well.
The problem is on Sever side request, I am getting the Cross-Origin Request Blocked error.
I add below link in .htaccess file and AngularJS app.js, still getting same error
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers: Authorization
AngularJS Provider
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.defaults.withCredentials = true;
Error Message I am getting is
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
http://192.168.1.18/tracker/user/login.
This can be fixed by moving the resource to the same domain or enabling CORS.
Screen of Request & Response Header
Please guide me any configuration need to be changed for enabling CORS. Our server side framework is Zend 1.x
The cross origin is forced by your browser, running the application from any distributed phone should not be blocked with your current settings.
To allow communication between your "served to browser" app to your server use a browser plugin
Allow-Control-Allow-Origin: * Chrome Plugin do the work
I have changed the .htaccess files as below and its worked out, Google Chrome is not accepting the '*', so I specified the exact URL
Header set Access-Control-Allow-Origin "http://localhost:8100"
Header set Access-Control-Allow-Credentials: true
While I don't have experience using Zend with Ionic, I did experience this issue when interfacing with an IIS hosted REST API via Ionic.
For me, I had to add "Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS" server side in addition to what you already have.
After adding the 'allow methods' header, I was able to fully utilize my API.
If this doesn't get it for you, report back and I will dig a bit deeper in my project to see if I've forgotten a client side change that were also required.
Related
I am working on setting iframe and stuck with local testing. I have my app running on localhost:3000
I have setup Iframe in my app with src url set to localhost:1234 for local testing. I was hoping accessing via local host would resolve the cross origin error but looks like since port numbers are different, this doesn't seem to work
SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
I have looked into various stack overflow posts and tried disabling chrome web security, even then this doesn't seem to let me do some local testing.
Any suggestions on how to prevent the cross origin error in this case?
Thanks!
Your app (the backend) should send a CORS header (from localhost:3000 if I understand correctly). A different port (just like a different hostname) counts as a different origin, so the same origin policy applies to requests, and you have to explicitly enable cross-origin requests.
The way to do so is your "backend" must send the response header
Access-Control-Allow-Origin: localhost:1234
if that's where your frontend app is running. For development, you can also send
Access-Control-Allow-Origin: *
Don't do * in later stages of your pipeline and especially not in production as you might open your app to further vulnerabilities (CSRF).
If your frontend app uses cookies to authenticate cross-origin, the backend must also send Access-Control-Allow-Credentials: true, and your frontend javascript must add withCredentials: true to the request. However, it doesn't sound like this is the case for you.
I think this is better than disabling cross-origin restrictions as this would work for any developer without any setup, and without compromising browser security. It gives you full control over which client can access your API, and also allows you to understand cross origin requests better.
I was able to do local testing via Safari following the steps here:
Safari -> Preferences -> Advanced
then at the bottom tick Show Develop Menu in menu bar
then in the Develop Menu tick Disable Cross-Origin Restrictions
Cross-Origin Resource Sharing is disabled on some modern browsers by default. Allow CORS: Access-Control-Allow-Origin plugin for Chrome adds necessary HTTP headers to perform development on localhost without CORS error.
I'm trying to fetch the list of official images from docker hub using v2 api. If I try to do curl or use postman, I get the response correctly, but when I try to fetch the list using angularjs service, I get the following error
XMLHttpRequest cannot load https://hub.docker.com/v2/repositories/library/?page=8&page_size=15. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.
Can someone suggest solution for this. How can I enable cors for this?
CORS could be enabled on the server side, and this is not your case. What you could do is :
1) use a proxy, for instance NGNIX, and make Sure that all request Made to localhost/whatever are redirected to hub.docker.com . This way you can "cheat" Cross-origin block
2) if you need a temporary and dirty solution you could more simply install chrome/safari plugins to bypass CORS security check
There is only one way to bypass CORS is send request through a cors proxy like http://crossorigin.me
It's an opensource project and you can build your own proxy server by download the full source code from here: https://github.com/technoboy10/crossorigin.me
Reason behind the issue :
As per my understanding you are doing an AJAX call to a different domain than your page is on. So, the browser is blocking it for security reasons as it usually allows a request in the same origin.A tutorial about how to achieve that is using CORS.
When you are using curl or postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:
Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.
I made a website in angular which consumes ASP.NET Web Services. I followed this tutorial: Tutorial.
I used the same code as there and when i make an registration it is ok and the user goes in the database but when i try to login i get that massage in the console:
XMLHttpRequest cannot load localhost:16270/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:50357' is therefore not allowed access.
I know the reason (i am not allowed to make CORS request) but for the register i am not allowed too but somehow the code overrides that but this doesn't work for the login. I searched google tried many things but nothing really helped. I tried to enable CORS, tried to send Access-Control-Allow-Origin: * to the response header but nothing changed. I know that i must add: Access-Control-Allow-Origin: * to the response header but how to add response header on Web Service that i didn't created (i am talking about http://localhost:16270/token). I didn't created that service and it needs header to be added to its response. How can i made that ? Or i should do something else to make the things work?
If in producation you web app and service is going to be on same domain then this issue won't be raised.
If you just want to resolved it temporary for development the you can add
access control allow origin chrome extension or you can open chrome with web-security disable by just opening a new chrome session from command prompt
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
I'm using Wamp as my local server while I test my Angular app.
I am using $resource to get some api data from my server but I'm getting a message
XMLHttpRequest cannot load http://myproj.herokuapp.com/api/projects?name=demo.
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 401.
I've searched far and wide on the web but I cannot find a working way to get around this.
Any new fresh ideas? Has anyone overcome this issue?
how to allow ACCESS-CONTROL-ALLOW-ORIGIN aka cross-domain on wampserver
This author got it right.
"You have to enable the headers module first, like so :
click on the wamp icon in your systray
go to Apache > Apache modules
check the option 'headers_module'
And then include this in your apache config:
Header set Access-Control-Allow-Origin: *
(in httpd.conf or in the configuration of your vhost)
(Instead of the * you can also specify a specific domain)"
Then bring up your browser, and use localhost/filename to access your files.
I'm using restangular to consume an api hosted on the same server as the angular files. All requests to the api are getting Origin is not allowed by Access-Control-Allow-Origin errors. I've tried altering headers in the config
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
and updating angular/restangular. Is there a way to set the headers for same domain requests using restangulars setdefaultheaders method?
The error that your are getting is due to Cross Origin Resource Sharing (CORS) policies of your web server.
The resources being on the same server is not enough. They have to be served by the same host.
Is important to understand that api.mydomain.com is a different from www.mydomain.com.
Also having a different port (api.mydomain.com vs api.mydomain.com:9000) makes it a different host.
Check that the response of the response of your server contains the HTTP header:
"Access-Control-Allow-Origin: api.yourdomain.com"
To check how to enable a CORS on your web server check this useful website: enable_cors.org
You can read more about CORS