Unable to bypass CORS in angularjs seed app

Question

I'm using angularjs-seed app and I'm trying to get JSON response from server (MarkLogic) using $http. I've been on it for 3 days tried every response from other similar stackoverflow answers but not able to get it working. Please help!

The browser returns this:

XMLHttpRequest cannot load http://sreddy:8003/v1/search?format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. 

Here's my app code

app.js

'use strict';


// Declare app level module which depends on filters, and services
var app = angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]);

app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.otherwise({redirectTo: '/view1'});

  // to avoid CORS
  $httpProvider.defaults.withCredentials = true;
  $httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

controllers.js

'use strict';

/* Controllers */

var app = angular.module('myApp.controllers', []);


app.controller('MyCtrl1', ['$scope', 'dataService', function($scope, dataService) {
      $scope.test = "test";
      $scope.data = null;
      dataService.getData().then(function (dataResponse) {
          $scope.data = dataResponse;
      });
      console.log($scope.data);
  }]);

  app.controller('MyCtrl2', [function() {
      console.log("from MyCtrl2");
  }]);

services.js

'use strict';

/* Services */


// Demonstrate how to register services
// In this case it is a simple value service.
var app = angular.module('myApp.services', []);

app.value('version', '0.1');

app.service('dataService', function($http) {

this.getData = function() {
    // $http() returns a $promise that we can add handlers with .then()
    return $http({
        method: 'GET',
        url: 'http://sreddy:8003/v1/search?format=json'
     });
 }
});

Answer 1

useXDomain is not a thing.

You are indeed having a same-origin problem. In order for your request to work, you will need to change your headers on the request. Since you are making a simple GET request, you should be able to do it, provided it's a simple request. Your content-type is likely what is flagging the request as a CORS request.

Usually - this can be fixed by setting your content-type header to application/x-www-form-urlencoded, multipart/form-data, or text/plain, like this:

$http({
    method: 'GET',
    url: 'http://sreddy:8003/v1/search?format=json',
    headers: {'Content-Type':'text/plain'} //or whatever type
 });

Or - you can set up an interceptor and add headers to all requests meeting some criteria.

For not-simple requests, which may get preflighted, you will need to work more with the request headers in addition to ensure response headers satisfy the preflight request. If you don't have access to the server (to set response headers), you will have to work within their allowed parameters. Here is some more info on CORS.

Answer 2

You need to run an http server - simplest way is using python

from the main directory of the project...

python3 -m http.server 8080

Then go to the url localhost:8080/index.html and you'r golden !

Answer 3

I solved this issues by using express.js as a proxy server which also enables me to serve static content usinf the proxy