title: unable to access data from rails api in angularjs
body: <p>I am trying to create a simple todo api using rails-api gem and for frontend I am using AngularJS. When I send a get request to rails server from browser its giving the appropriate JSON response (e.g. <a href="http://localhost:3000/tasks" rel="nofollow">http://localhost:3000/tasks</a>) but when I try to access the same from angular using <strong><em>$http.get(<a href="http://localhost:3000/tasks)_" rel="nofollow">http://localhost:3000/tasks)</em></a></strong> it is going to the failure handler function instead of success. What shall I do?</p>
  
  <p>Here is my code</p>
  
  <p>Tasks Controller</p>
  
  <pre><code>class TasksController &lt; ApplicationController
    before_action :set_task, only: [:show, :update, :destroy]
  
    # GET /tasks
    # GET /tasks.json
    def index
      @tasks = Task.all
  
      render json: @tasks
    end
  
    # GET /tasks/1
    # GET /tasks/1.json
    def show
      render json: @task
    end
  
    # POST /tasks
    # POST /tasks.json
    def create
      @task = Task.new(task_params)
  
      if @task.save
        render json: @task, status: :created, location: @task
      else
        render json: @task.errors, status: :unprocessable_entity
      end
    end
  
    # PATCH/PUT /tasks/1
    # PATCH/PUT /tasks/1.json
    def update
      @task = Task.find(params[:id])
  
      if @task.update(task_params)
        head :no_content
      else
        render json: @task.errors, status: :unprocessable_entity
      end
    end
  
    # DELETE /tasks/1
    # DELETE /tasks/1.json
    def destroy
      @task.destroy
  
      head :no_content
    end
  
    private
  
      def set_task
        @task = Task.find(params[:id])
      end
  
      def task_params
        params.require(:task).permit(:title, :completed, :order)
      end
  end
  </code></pre>
  
  <p>Angular code</p>
  
  <pre><code>angular
  .module('app', [])
  .controller('MainCtrl', [
  '$scope',
  '$http',
  function($scope,$http){
    $scope.test = 'Hello world!';
  
    $http.get('http://localhost:3000/tasks').then(function(response){
      $scope.tasks = response.data;
    },function(response){
      alert('error');
    })
  }]);
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body ng-app="app" ng-controller="MainCtrl"&gt;
      &lt;div&gt;
        {{test}}
      &lt;/div&gt;
      &lt;ul&gt;
        &lt;li ng-repeat="task in tasks"&gt;{{task.title}}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>When I visit the HTML page it shows <em>error</em> as alert</p>