No Access-Control-Allow-Origin header is present on the requested resource- AngularJS

Question

XMLHttpRequest cannot load http   mywebservice  No  Access-Control-Allow-Origin  header is present on the requested resource  Origin  http   localhost 9000  is therefore not allowed access    I get this error when I try to run my web-service from inside my code  I tried finding about it and tried many solutions which were suggested which I found on net  Pasting the code below    lt form name  LoginForm  ng-controller  LoginCtrl  ng-submit  init username password country   gt       lt label gt Country lt  label gt  lt input type  text  ng-model  country   gt  lt br  gt  lt br  gt       lt label gt UserName lt  label gt  lt input type  text  ng-model  username    gt  lt  br gt  lt  br gt       lt label gt Password lt  label gt  lt input type  password  ng-model  password  gt       lt  br gt       lt button type  submit   gt Login lt  button gt   lt  form gt    And controller form the corresponding js is    app controller  LoginController      http     scope   function   scope   http         scope login   function  credentials         http get  http   mywebservice   success function   data             alert data                            The web-service works fine when I hit it from URL bar  How to resolve the problem  Kindly help

User · Answer

I got      No  Access-Control-Allow-Origin  header is present   and the problem was with the URL I was providing  I was providing the URL without a route  e g   https   misty-valley-1234 herokuapp com     When I added a path it worked  e g    https   misty-valley-1234 herokuapp com messages  With GET requests it worked either way but with POST responses it only worked with the added path

User · Answer

This is a CORS issue  There are some settings you can change in angular - these are the ones I typically set in the Angular  config method  not all are related to CORS     httpProvider defaults useXDomain   true   httpProvider defaults withCredentials   true  delete  httpProvider defaults headers common  X-Requested-With     httpProvider defaults headers common  Accept      application json    httpProvider defaults headers common  Content-Type      application json     You also need to configure your webservice - the details of this will depend on the server side language you are using  If you use a network monitoring tool you will see it sends an OPTIONS request initially  Your server needs to respond appropriately to allow the CORS request   The reason it works in your brower is because it isn t make a cross-origin request - whereas your Angular code is

User · Answer

This is how it worked for me  For Windows users testing with Bracket and AngularJS  1  Go to your desktop  2  Right click on your desktop and look for  NEW  in the popup drop down dialog box and it will expand  3  Choose Shortcut  4  A dialog box will open  5  Click on Browse and look for Google Chrome   6  Click Ok- Next- Finish and it will create the google shortcut on your desktop  7  Now Right Click on the Google Chrome icon you just created  8  Click properties  9  Enter this in the target path   C  Program Files Google Chrome Application chrome exe  --args --disable-web-security   10  Save it  11  Double click on your newly created chrome shortcut and past your link in the address bar and it will work

User · Answer

In my case  I was trying to hit a WebAPI service on localhost from inside an MVC app that used a lot of Angular code   My WebAPI service worked fine with Fiddler via http   localhost myservice   Once I took a moment to configure the MVC app to use IIS instead of IIS Express  a part of Visual Studio   it worked fine  without adding any CORS-related configuration to either area

User · Answer

I have a solution below and its works for me   app controller  LoginController      http     scope   function   scope   http     scope login   function  credentials     http           method   jsonp           url   http   mywebservice           params                format   jsonp               callback   JSON CALLBACK                   then function  response            alert response data                      in  http   mywebservice  there must be need a callback parameter which  return JSON CALLBACK with data  There is a sample example below which works perfect    scope url    https   angularjs org greet php        http           method   jsonp           url   scope url          params                format   jsonp               name   Super Hero               callback   JSON CALLBACK                   then function  response            alert response data             example output      name   Super Hero   salutation   Apa khabar   greeting   Apa khabar Super Hero

User · Answer

It is a problem on the server side  You have to add your client address to your server exposed API  If you are using Spring frame work you can annotate  CrossOrgin  from org springframework web bind annotation CrossOrigin   Eg       CrossOrigin origins    http   localhost 8080

User · Answer

Use this extension for chrome   Allows to you request any site with ajax from any source  Adds to response  Allow-Control-Allow-Origin     header  https   chrome google com webstore detail allow-control-allow-origi nlfbmbojpeacfghkpbjhddihlkkiljbi related

User · Answer

Replace get with jsonp     http jsonp  http   mywebservice   success function   data         alert data

User · Answer

On the client side you can enable cors requests in AngularJS via  app config    httpProvider   function  httpProvider             httpProvider defaults useXDomain   true          delete  httpProvider defaults headers common  X-Requested-With                However if this still returns an error  this would imply that the server that you are making the request has to allow CORS request and has to be configured for that

User · Answer

If you are using chrome  try open chrome with the args to disable web security like you see here   Disable same origin policy in Chrome

User · Answer

I added this and it worked fine for me   web api  config EnableCors      Then you will call the model using cors   In a controller you will add at the top for global scope or on each class  It s up to you     EnableCorsAttribute  http   localhost 51003                 Also  when your pushing this data to Angular it wants to see the  cshtml file being called as well  or it will push the data but not populate your view    function           use strict       angular module  common services             ngResource         constant  appSettings                 serverPath   http   localhost 51003 About                   Replace URL with the appropriate path from production server    I hope this helps anyone out  it took me a while to understand Entity Framework  and why CORS is so useful

User · Answer

The Chrome Webstore has an extension that adds the  Access-Control-Allow-Origin  header for you when there is an asynchronous call in the page that tries to access a different host than yours   The name of the extension is   Allow-Control-Allow-Origin     and this is the link  https   chrome google com webstore detail allow-control-allow-origi nlfbmbojpeacfghkpbjhddihlkkiljbi

[angularjs] No 'Access-Control-Allow-Origin' header is present on the requested resource- AngularJS

Examples related to angularjs

Examples related to ajax

Examples related to cors

Examples related to cross-domain