I have not been able to get Angular $http to communicate with a remote REST service. I have tried Restangular and $resource too. The problem seems to be with the underlying $http service.
I am getting the following error:
XMLHttpRequest cannot load http://www.EXAMPLE-DOMAIN.com/api/v2/users/sign_in. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
I have researched this a lot. Currently I have tried setting the $httpProvider headings when configuring my app module and played with $http headers. Below is some of my current code.
I didn’t have any luck with the settings you have in your App Config. The headers you are setting will have no affect. The headers have to be returned in the response from the server. Sometimes, running a local http server helps with this issue. I didn’t have any issues running on a device or simulator(within Cordova mobile app). I only had some issues running in a desktop browser. In my case, I have control over the server and can enable CORS functionality on it. If you dont have that luxury, I have read some cases where a proxy service can be used to get around this issue. I hope that helps in some way.
I will likely be making a server update eventually. However I discovered two things that helped me solve this for my development environment.
The PhoneGap build for the app does not have the CORS issue. So no problem on actual builds…
I can turn off CORS security on my Chrome browser for testing. I only run this no-CORS browser when in dev. You can do this on OSX with the following command: open -a Google\ Chrome --args --disable-web-security I just created a little bin script for it.
XMLHttpRequest cannot load http://lvh.me:3000/user_types. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://lvh.me:9000’ is therefore not allowed access. The response had HTTP status code 404.
XMLHttpRequest cannot load http://myLink. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access. The response had HTTP status code 401.
But i need to change only in client side i cant change in server side. can u give me any steps to do this???
Hi guys, i struggled for way too long with CORS issues caused by the interaction of an emulated Ionic project (running localy) with some small Node.JS webservices (also running localy).
Behold the short easy workaround : Chrome’s plugin AllowControlAllowOrigin.
Just switch the radio button from red to green, and no more blocked request, error or warning !
Of course it’s a temporary solution and you may have to put your hands in your request headers when the time to stop the local tests will come. In the meantime, that’s a great way to avoid loosing time on those anoying recurrent issues.
Add flags “–user-data-dir=“C:/ChromeDevSession” --disable-web-security” at the end of Object string.
“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” --user-data-dir=“C:/ChromeDevSession” --disable-web-security