send get request with angular to Origin http://localhost:3000

Question

I am Newbie to angular js. Here I am trying to call API from rails server with "http://localhost:3000/". I got error for

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'

I have added 'CORS' chrome extension to fix it. Now the problem is my request is passing to localhost:3000 as [OPTIONS], and I want it as get request.

'use strict';

angular.module('dayton')
.service('foodCategoryService', ['$http', '$window', 'authService', 'Upload',
  function($http, $window, authService, Upload){
        var field = {};

      field.getFields = function (){
        console.log("---------foodCategoryService")
        return $http.get('http://localhost:3000/api/list_food_category',  {
          headers: {Authorization: authService.getToken()}
        })
        .then(function(response) {
          return response;
        }, function(x) {
          $scope.authError = 'Server Error';
        });
      };
        return field;
  }]);

ActionController::RoutingError (No route matches [OPTIONS] "/api/list_food_category"):

Any help is going to be appreciated

CORS plugin only can't fix it. Your server needs to allow request for CORS. — Ved
– Ved, Commented Dec 15, 2016 at 6:25
You don't need a CORS extension, if you are making calls and hosting your frontend on the same host, ie localhost right? — M. Junaid Salaat
– M. Junaid Salaat, Commented Dec 15, 2016 at 6:25
No, I am using two different servers here. localhost:8081 is my current server and I am trying to send api call to localhost:3000 — Shefalee Chaudhary
– Shefalee Chaudhary, Commented Dec 15, 2016 at 6:27
@Ved I have tried to add allow request for CORS. would you suggest me any link to refer ? I have tried with app.use(function (req, res, next) { .... but getting error for app and use function in express.js — Shefalee Chaudhary
– Shefalee Chaudhary, Commented Dec 15, 2016 at 6:31
check here: stackoverflow.com/questions/7067966/how-to-allow-cors — Ved
– Ved, Commented Dec 15, 2016 at 6:35

Azad · Accepted Answer · 2016-12-15 06:29:57Z

0

modify your app config

angular.module('dayton').config(function($httpProvider){

    $httpProvider.defaults.headers.common = {};
    $httpProvider.defaults.headers.post = {};
    $httpProvider.defaults.headers.put = {};
    $httpProvider.defaults.headers.patch = {};
});

answered Dec 15, 2016 at 6:29

Azad

5,2725 gold badges32 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shefalee Chaudhary Over a year ago

Can you please tell me, In while file do I need to add this ?

Azad Over a year ago

in your controller file

Shefalee Chaudhary Over a year ago

I have added this lines in foodCategoryController.js . But same issue I got. request is passing as [OPTIONS] . not as get request.

Abdullah · Accepted Answer · 2016-12-15 06:34:25Z

0

It is not your angular js side problem. You have to allow cross origin request at your server end

answered Dec 15, 2016 at 6:34

Abdullah

9097 silver badges3 bronze badges

2 Comments

Shefalee Chaudhary Over a year ago

For server side, I am using node.js . Can you please suggest which changes I need to do for that?

Abdullah Over a year ago

developer.mozilla.org/en-US/docs/Web/HTTP/Ac cess_control_CORS example code : app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });

Collectives™ on Stack Overflow

send get request with angular to Origin http://localhost:3000

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related