title: $http Cross Origin Request Blocked by Angular JS
body: <p>I am trying to implement search suggestion using one of our Suggestions API "<a href="https://SuggestionsAPI.net/suggest?key=xyz" rel="nofollow">https://SuggestionsAPI.net/suggest?key=xyz</a>" which is working fine with Ajax GET request but when I am trying to use it with Angular $http service, it is throwing me error is console:</p>
  
  <pre><code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote 
  resource at https://SuggestionsAPI.net/suggest?key=xyz. This can be fixed by moving the 
  resource to the same domain or enabling CORS.
  </code></pre>
  
  <p>Further I tried :</p>
  
  <pre><code>$httpProvider.defaults.headers.get = { 'Access-Control-Allow-Origin': '*' };
  $httpProvider.defaults.headers.get = { 'Access-Control-Request-Headers': 'X-Requested-With, accept, content-type' };
  $httpProvider.defaults.headers.get = { 'Access-Control-Allow-Methods': 'GET, POST' };
  $httpProvider.defaults.headers.get = { 'dataType': 'jsonp' };
  </code></pre>
  
  <p>I am stuck here thinking why same GET request is blocked by browser when using Angular JS. Please suggest me to eliminate it.</p>
  
  <p>EDIT: My next step id to assign the suggestions inside a function:</p>
  
  <pre><code>app.directive('autoComplete', ['AutoCompleteService', function (AutoCompleteService) {
  return {
      restrict: 'A',
      link: function (scope, elem, attr, ctrl) {
          elem.autocomplete({
              source: function (searchTerm, response) {
                  AutoCompleteService.search(searchTerm.term).then(function (autocompleteResults) {
                      response($.map(autocompleteResults, function (autocompleteResult) {
                          return {
                              label: autocompleteResult.JumboID,
                              value: autocompleteResult.JumboID
                          }
                      }))
                  });
              },
              minLength: 3,
              select: function (event, selectedItem) {
                  // Do something with the selected item, e.g. 
                  scope.yourObject = selectedItem.item.value;
                  scope.$apply();
                  event.preventDefault();
              }
          });
      }
  };
  </code></pre>
  
  <p>}]);</p>