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
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
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
@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
check here: stackoverflow.com/questions/7067966/how-to-allow-cors — Ved

Azad Azad · Accepted Answer · 2016-12-15T06:29:57

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 = {};
});

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

2 Answers